From e4b246a8bc6615c02c63bc3c463df5339e917f31 Mon Sep 17 00:00:00 2001
From: Jordan-Tompit <janko.jordan@tompit.com>
Date: Wed, 15 Mar 2023 11:31:32 +0100
Subject: [PATCH] Change styles in(dropdown, grid, inputs, modal, radio,
 sidebar) Add new components(alerts, master search, pagination, tooltip)

---
 .../Pages/Democomp.razor                      | 411 ++++++++++----
 .../Styles/components/_alerts.scss            | 126 +++++
 .../Styles/components/_appbar.scss            |   2 +-
 .../Styles/components/_buttons.scss           |   4 +-
 .../Styles/components/_dropdown.scss          |   7 +
 .../Styles/components/_grid.scss              |  99 +++-
 .../Styles/components/_index.scss             |   7 +-
 .../Styles/components/_inputs.scss            |  94 +---
 .../Styles/components/_master-search.scss     | 202 +++++++
 .../Styles/components/_modal.scss             | 107 +++-
 .../Styles/components/_pagination.scss        | 129 +++++
 .../Styles/components/_radio.scss             |   4 +-
 .../Styles/components/_sidebar.scss           |  78 +--
 .../Styles/components/_tabs.scss              | 310 +++++++++++
 .../Styles/components/_tooltip.scss           | 501 ++++++++++++++++++
 .../Styles/globals/_variables.scss            |  47 +-
 .../Styles/layout/_css_documentation.scss     |  40 +-
 17 files changed, 1873 insertions(+), 295 deletions(-)
 create mode 100644 src/Connected.Components/Styles/components/_alerts.scss
 create mode 100644 src/Connected.Components/Styles/components/_master-search.scss
 create mode 100644 src/Connected.Components/Styles/components/_pagination.scss
 create mode 100644 src/Connected.Components/Styles/components/_tabs.scss
 create mode 100644 src/Connected.Components/Styles/components/_tooltip.scss

diff --git a/src/Connected.Components.Showcase.Runner/Pages/Democomp.razor b/src/Connected.Components.Showcase.Runner/Pages/Democomp.razor
index 649df9a..4659e3b 100644
--- a/src/Connected.Components.Showcase.Runner/Pages/Democomp.razor
+++ b/src/Connected.Components.Showcase.Runner/Pages/Democomp.razor
@@ -40,20 +40,17 @@
 
                 <nav>
                     <ul class="navbar mt-sm-5 pt-sm-5">
-                        <li class="navbar-item fab">
+                        <li class="navbar-item fab" data-tooltip="New document" data-tooltip-conf="right danger shadow">
                             <a href="#">
                                 <div class="navbar-leading-icon">
                                     <Glyph SVG="@Icons.Material.Outlined.Create" class="icon-root svg-icon icon icon icon-size-md" />
                                 </div>
                                 <span class="navbar-link">New document</span>
                             </a>
-                            <span class="navbar-tooltip">
-                                New document
-                            </span>
                         </li>
 
 
-                        <li class="navbar-item">
+                        <li class="navbar-item" data-tooltip="Tasks" data-tooltip-conf="right shadow">
                             <a href="#">
                                 <div class="navbar-leading-icon">
                                     <div class="badge-group">
@@ -70,15 +67,12 @@
                                     </div>
                                 </span>
                             </a>
-                            <span class="navbar-tooltip">
-                                Tasks
-                            </span>
                         </li>
 
 
 
 
-                        <li class="navbar-item">
+                        <li class="navbar-item" data-tooltip="Notification" data-tooltip-conf="right shadow">
                             <a href="#">
                                 <div class="navbar-leading-icon">
                                     <Glyph SVG="@Icons.Material.Outlined.Notifications" class="icon-root svg-icon icon  icon-size-md" />
@@ -90,12 +84,9 @@
                                     </div>
                                 </span>
                             </a>
-                            <span class="navbar-tooltip">
-                                Notification
-                            </span>
                         </li>
 
-                        <li class="navbar-item">
+                        <li class="navbar-item" data-tooltip="Calendar" data-tooltip-conf="right shadow">
                             <a href="#">
                                <div class="navbar-leading-icon">
                                     <Glyph SVG="@Icons.Material.Outlined.DateRange" class="icon-root svg-icon icon  icon-size-md" />
@@ -107,12 +98,9 @@
                                     </div>
                                 </span>
                             </a>
-                            <span class="navbar-tooltip">
-                                Calendar
-                            </span>
                         </li>
 
-                        <li class="navbar-item">
+                        <li class="navbar-item" data-tooltip="Main navigation" data-tooltip-conf="right shadow">
                             <a href="#">
                                 <div class="navbar-leading-icon">
                                     <Glyph SVG="@Icons.Material.Filled.Apps" class="icon-root svg-icon icon  icon-size-md" />
@@ -124,9 +112,6 @@
                                     </div>
                                 </span>
                             </a>
-                            <span class="navbar-tooltip">
-                                Main navigation
-                            </span>
                         </li>
                         <div class="sidebar-divider"></div>
                     </ul>
@@ -142,36 +127,123 @@
 
             <div class="appbar">
                 
-                    <div class="d-none d-sm-inline-block" @onclick="ToggleSidebar">   
-                        @* <button class="btn btn-icon-alt">
-                            <Glyph SVG="@Icons.Material.Outlined.Menu" class="icon-root svg-icon" />
-                        </button>              
-                        <span class="text"> Sidebar</span> *@
+                    <div class="">   
+                        <button class="btn btn-icon-alt d-inline-block d-sm-none">
+                            <Glyph SVG="@Icons.Material.Outlined.ArrowBack" class="icon-root svg-icon icon-size-md" />
+                        </button>  
                     </div>
-                    <div class="d-flex gap-5 items-center">
+                    <div class="d-flex gap-2 gap-sm-5 items-center">
                         <div class="form-group-alt">
                             <div class="input-group-content">
-                                <div class="input-leading-icon"><Glyph SVG="@Icons.Material.Filled.Search" class="icon-root svg-icon icon-size-md" /></div>
+                                <button class="btn btn-icon-alt input-cta-icon mr-1"  tabindex="1">
+                                    <Glyph SVG="@Icons.Material.Filled.Search" class="icon-root svg-icon icon-size-md" />
+                                    <div class="input-cta-icon-more"><Glyph SVG="@Icons.Material.Outlined.ArrowDropDown" class="icon-root svg-icon icon-size-sm" /></div>
+                                </button>
+                                
+                                    <div class="search-drop-down" id="select" tabindex="-1">
+                                        <div class="dropdown-menu">
+                                            <div class="dropdown-header">Search in</div>
+
+                                            <a class="dropdown-item" href="#"><Glyph SVG="@Icons.Material.Filled.Search" class="icon-root svg-icon mr-2" />Search all content</a>
+                                            <div class="dropdown-divider"></div>
+                                            <a class="dropdown-item" href="#"><Glyph SVG="@Icons.Material.Outlined.Warehouse" class="icon-root svg-icon mr-2" />Search warehouse only</a>
+                                            <div class="dropdown-divider"></div>
+                                        </div>
+                                    </div>
+                                
                                 <div class="input-area">
                                     <form>
-                                    <input id="search" type="search" placeholder="Search about recipes">
+                                    <input id="search" type="search" placeholder="Search about recipes" autocomplete="off"  tabindex="2">
                                     @* <input class="button" type="button" value="Search"> *@
+
+                                    <div class="search-drop-down" id="search" tabindex="-1">
+                                        
+                                            <div class="dropdown-header">Epic search</div>
+
+                                            <div class="alert alert-sm info p-2 mx-3"> 
+                                                <div class="alert-content">
+                                                    <div class="alert-leading-icon"><Glyph SVG="@Icons.Material.Outlined.Info" class="icon-root svg-icon icon-size-md" /></div>
+                                                    <div class="alert-message">Your search is currently limited to warehouse only!</div>
+                                                </div>
+                                            </div>
+                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                                            <a class="dropdown-item" href="#"><Glyph SVG="@Icons.Material.Filled.Search" class="icon-root svg-icon mr-2" /> Se</a>
+                                            <div class="dropdown-divider"></div>
+                                            <a class="dropdown-item" href="#"><Glyph SVG="@Icons.Material.Filled.Search" class="icon-root svg-icon mr-2" />Sear</a>
+                                            <div class="dropdown-divider"></div>
+                                        </div>
+                                    </div>
+
                                     </form>
                                 </div>
-                                <div class="input-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div>
+                                <div  tabindex="3" class="input-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div>
                             </div>
+
                         </div>
-                        <div class="badge-group">
-                            <Glyph SVG="@Icons.Material.Outlined.Notifications" class="icon-root svg-icon icon-size-md" />
+                        <div class="badge-group mt-0">
+                            <button aria-label="delete" type="button" class="btn btn-core btn-icon">
+                                <span class="icon-button-label"style="font-size:1.25rem"
+                                    <Glyph SVG="@Icons.Material.Outlined.PlaylistAddCheck" class="icon-root svg-icon " />
+                                </span>
+                            </button>
                             <span class="badge-content badge-top right">
-                                <span class="badge badge-top right bg-core badge-overlap">3</span>
+                                <span class="badge badge-top right bg-warning badge-overlap">3</span>
                             </span>
-                            </div>
+                        </div>
                     </div>
             </div>
 
 
+         <section id="buttons" class="mt-3 b-1 b-r-4 p-5">
+                <h2>Alerts</h2>
+                <p>An alert is used to notify the user about an important message without interrupting the ongoing task.</p>
+
+                <div class="grid grid-col-2">
+                    <div class="wrapper">
+
+                        <div class="alert alert-sm danger"> <!--classes for smaller size (alert-sm) and color(danger, warning, success, info) -->
+                            <div class="alert-content">
+                                <div class="alert-leading-icon"><Glyph SVG="@Icons.Material.Outlined.ErrorOutline" class="icon-root svg-icon" /></div>
+                                <div class="alert-message">Meltdown is imminent!</div>
+                                <div class="alert-cta-icon">                     
+                                    <Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="alert elevation-1 alert-sm warning"> <!-- + class for shadow (elevation-1) -->
+                            <div class="alert-content">
+                                <div class="alert-leading-icon"><Glyph SVG="@Icons.Material.Outlined.WarningAmber" class="icon-root svg-icon" /></div>
+                                <div class="alert-message">The reactor temperature exceeds the optimal range.</div>
+                                <div class="alert-cta-icon">                     
+                                    <Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" />
+                                </div>            
+                            </div>
+                        </div>
+
+                        <div class="alert alert-banner alert-sm success">  <!-- + class for banner (alert-bannner) alert-cta-icon(X) is visible -->
+                            <div class="alert-content">
+                                <div class="alert-leading-icon"><Glyph SVG="@Icons.Material.Outlined.CheckCircle" class="icon-root svg-icon" /></div>
+                                <div class="alert-message">The reactor is running at optimum temperature.</div>
+                                <div class="alert-cta-icon">                     
+                                    <Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="alert info"> <!-- default alert -->
+                            <div class="alert-content">
+                                <div class="alert-leading-icon"><Glyph SVG="@Icons.Material.Outlined.Info" class="icon-root svg-icon" /></div>
+                                <div class="alert-message">The reactor was fired up successfully.</div>
+                                <div class="alert-cta-icon">                     
+                                    <Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
 
+                </div>
+        </section>
             
 
 
@@ -316,20 +388,20 @@
                     
                         <div class="btn-content" role="group" aria-label="Basic example">
 
-                              <button aria-label="delete" type="button" class="btn btn-danger btn-icon">
-                                <span class="icon-button-label">
-                                    <Glyph SVG="@Icons.Material.Filled.AirplanemodeActive" class="icon-root svg-icon " />
-                                </span>
-                            </button>
+                                <button data-tooltip="Description here" data-tooltip-conf="bottom  warning" aria-label="plane" type="button" class="btn btn-danger btn-icon">
+                                    <span class="icon-button-label">
+                                        <Glyph SVG="@Icons.Material.Filled.AirplanemodeActive" class="icon-root svg-icon " />
+                                    </span>
+                                </button>
 
-                            <button aria-label="delete" type="button" class="btn btn-outline-success btn-icon">
+                            <button data-tooltip="Description here" data-tooltip-conf="top success" aria-label="plane" type="button" class="btn btn-outline-success btn-icon">
                                 <span class="icon-button-label">
                                     <Glyph SVG="@Icons.Material.Filled.AirplanemodeActive" class="icon-root svg-icon " />
                                 </span>
                             </button>
 
 
-                            <button class="btn btn-icon-alt btn-icon-alt-info" >
+                            <button data-tooltip="Description here" data-tooltip-conf="right inherit" class="btn btn-icon-alt btn-icon-alt-info" >
                                 <Glyph SVG="@Icons.Material.Filled.AirplanemodeActive" class="icon-root svg-icon" />
                             </button>
 
@@ -608,7 +680,7 @@
                             DateTime date = DateTime.Today;
                         }
 
-                        <div class="form-group">
+                        <div class="form-group col-span-3">
                             <textarea type="textarea" rows="5" required="required"></textarea><span class="highlight"></span><span class="bar"></span>
                             <label class="label-animated">Message</label>
                             <div class="input-helper-text">Some helping Text</div>
@@ -728,7 +800,7 @@
 
                 </div>
 
-                <div class="data-grid dense image select collapse   mt-5">
+                <div class="data-grid dense select collapse   mt-5">
                     <!--dense select collapse-->
                     <div class="data-grid-row-content @NavClosed">
                         <!--active-->
@@ -743,36 +815,40 @@
                             </label>
                         </div>
 
-                        <div class="data-grid-img">
-        
-                         <img class="img-fluid" src="https://source.unsplash.com/random?face" />
-                        </div>
 
-                        <div class="data-grid-container">
-                            <div class="row">
-                                <div class="col-12 col-md-4">
-                                    <div class="text-hc">Product 1</div>
-                                    <a class="text-link text-semibold" href="#">0023 001445669 1</a>
-                                    <div class="text-small">Product serial code</div>
-                                    <div class="badge-group">
-                                            <span class="badge-label bg-core">Test</span>
-                                            <span class="badge-label bg-core">Test 1</span>
+
+                        <div class="data-grid-container show-image-vertical">  <!--class for show-image or show-image-vertical moved here-->
+
+                            <div class="data-grid-img">        
+                                <img class="img-fluid" src="https://source.unsplash.com/random?face" />
+                            </div>
+
+                            <div class="data-grid-wrapper"> <!--becourse we move img div in data-grid-container-->
+                                <div class="row">
+                                    <div class="col-12 col-md-4">
+                                        <div class="text-hc">Product 1</div>
+                                        <a class="text-link text-semibold" href="#">0023 001445669 1</a>
+                                        <div class="text-small">Product serial code</div>
+                                        <div class="badge-group">
+                                                <span class="badge-label bg-core">Test</span>
+                                                <span class="badge-label bg-core">Test 1</span>
+                                        </div>
+                                    </div>
+                                    <div class="col-12 col-md-4">
+                                        <label>Material code</label>
+                                        <div class="">Material 29</div>
                                     </div>
-                                </div>
-                                <div class="col-12 col-md-4">
-                                    <label>Material code</label>
-                                    <div class="">Material 29</div>
-                                </div>
 
-                                <div class="col-12 col-md-4 text-md-right">
-                                    <label>Price</label>
-                                    <div class="text-semibold ">77,29</div>
+                                    <div class="col-12 col-md-4 text-md-right">
+                                        <label>Price</label>
+                                        <div class="text-semibold ">77,29</div>
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="row collapsed @NavClosed">
-                                <div class="col-12 col-md-4 ">
-                                    <div class="text-small">
-                                        You have successfully published ticket You have successfully published ticket Partner network on desk Connected Partner network on desk Connected
+                                <div class="row collapsed @NavClosed">
+                                    <div class="col-12 col-md-4 ">
+                                        <div class="text-small">
+                                            You have successfully published ticket You have successfully published ticket Partner network on desk Connected Partner network on desk Connected
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -782,6 +858,57 @@
                         </div>
                     </div>
                 </div>
+
+
+
+
+                        <ul class="pagination filled">
+                            <li class="pagination-item">
+                            <button aria-label="Previous page" type="button" disabled="" class="btn btn-icon-alt">
+                                <span class="icon-button-label">
+                                    <Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon" />
+                                </span>
+                            </button>
+                            </li>
+
+                            <li class="pagination-item pagination-item-selected">
+                            <button aria-current="page" aria-label="Current page 1" type="button" class="btn btn-icon">
+                                <span class="button-label">1</span>
+                            </button>
+                            </li>
+
+                            <li class="pagination-item">
+                            <button aria-label="Page 2" type="button" class="btn btn-icon">
+                                <span class="button-label">2</span>
+                            </button>
+                            </li>
+
+                            <li class="pagination-item">
+                            <button aria-label="Page 3" type="button" class="btn btn-icon">
+                                <span class="button-label">3</span>
+                            </button>
+                            </li>
+
+                            <li class="pagination-item">
+                            <button aria-label="Page 4" type="button" class="btn btn-icon">
+                                <span class="button-label">4</span>
+                            </button>
+                            </li>
+
+                            <li class="pagination-item">
+                            <button aria-label="Next page" type="button" class="btn btn-icon-alt">
+                                <span class="icon-button-label">
+                                    <Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon" />
+                                </span>
+                            </button>
+                            </li>
+                        </ul>
+
+
+
+
+
+
             </div>
 
 
@@ -939,35 +1066,124 @@
 
 
 
+<section id="tabs" class="mt-3 b-1 b-r-4 p-5">
+            <h2>Tabs</h2>
+            <p>Cards contain content and actions that relate information about a subject.</p>
+            
+    <div class="tabs tabs-rounded">
+
+        <div class="tabs-toolbar">
+            <div class="tabs-toolbar-inner">
+                <div class="tabs-scroll-button">                            
+                    <button class="btn btn-icon-alt">
+                        <Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon" />
+                    </button>  
+                </div>
+                <div class="tabs-toolbar-content">
+                    <div class="tabs-toolbar-wrapper">
+                
+                        <div class="tab">
+                            Tab One
+                        </div>
+                    
+                        <div class="tab">
+                            Tab Two
+                        </div>
+                    
+                        <div class="tab tab-active">
+                        Tab Three
+                        </div>
+                    
+                        <div class="tab disabled">
+                        Tab Disabled
+                        </div>
+                
+                        <div class="tab-slider tab-slider-horizontal" style="min-width:160px"></div>
+                    </div>
+                </div>
+                <div class="tabs-scroll-button">                            
+                    <button class="btn btn-icon-alt">
+                        <Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon" />
+                    </button>  
+                </div>
+            </div>
+        </div>
+        <div class="tabs-panels p-5">
+            <p class="typography typography-body1">Content Three</p>
+        </div>
+    </div>
+</section>
+
+
+
+
         <section id="modal">
             <!-- TO DO close modal on pres esc and when clicked outside the modal-->
             <!-- TO DO when modal is open add class to body .scroll-disabled-->
             
             <!-- Button trigger modal -->
-            <button type="button" class="btn btn-primary" @onclick="ToggleModal" data-bs-target="#staticBackdrop">
-            Launch backdrop modal
-            </button>
+            <div class="btn-content">
+                <button type="button" class="btn btn-primary" @onclick="ToggleModal" data-bs-target="#staticBackdrop">
+                    Launch backdrop modal
+                </button>
+                <button type="button" class="btn btn-primary" @onclick="ToggleModal" data-bs-target="#staticBackdrop">
+                    Launch image modal
+                </button>
 
+            </div>
             <!-- Modal -->
-            <div class="modal fade " tabindex="-1"> <!--@NavClosed-->
-            <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
-                <div class="modal-content">
-                <div class="modal-header">
-                    <h3 class="modal-title">Modal title</h3>
-                    @* <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> *@
-                </div>
-                <div class="modal-body">
-                    ssss
-                </div>
-                <div class="modal-footer">
-                                <button type="button" class="btn btn-secondary" @onclick="ToggleModal">Close</button>
-                    <button type="button" class="btn btn-core">Understood</button>
-                </div>
+            <div class="modal fade " tabindex="-1">
+                <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
+                    <div class="modal-content">
+                    <div class="modal-header">
+                        <h3 class="modal-title">Modal title</h3>
+                        @* <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> *@
+                    </div>
+                    <div class="modal-body">
+                        ssss
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" @onclick="ToggleModal">Close</button>
+                        <button type="button" class="btn btn-core">Understood</button>
+                    </div>
+                    </div>
                 </div>
             </div>
+
+            <!--IMAGE MODAL-->
+            <div class="modal modal-image fade" tabindex="-1">
+                <div class="modal-dialog modal-dialog-centered">
+                    <div class="modal-content">
+                  
+                        <button  @onclick="ToggleModal" type="button" class="btn btn-icon-alt close" data-bs-dismiss="modal" aria-label="Close">
+                            <Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" />
+                        </button>
+                        <img class="img-fluid" src="https://source.unsplash.com/random?face">
+               
+                    </div>
+                </div>
             </div>
 
 
+            <!-- Basic Modal -->
+            <div class="modal modal-basic fade @ModalClosed" tabindex="-1">
+                <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
+                    <div class="modal-content">
+                    <div class="modal-header">
+                        <h4 class="modal-title">Delete selected images?</h4>
+                    </div>
+                    <div class="modal-body">
+                        Images will be permenantly removed from your account and synced devices.
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-sm btn-secondary" @onclick="ToggleModal">Close</button>
+                        <button type="button" class="btn btn-sm  btn-core">Delete</button>
+                    </div>
+                    </div>
+                </div>
+            </div>            
+
+
         </section>
         </main>
 
@@ -1000,18 +1216,25 @@
                                             <div class="color-picker-container">
 
                                                 <form class="color-picker" action="">
-                                                    <fieldset>
 
+                                                    <label class="radio-group">
+                                                        <input class="radio-input light" id="light" name="theme" type="radio" >
+                                                        <div class="radio-fill light"></div>
                                                         <label for="light" class="visually-hidden">Light</label>
-                                                        <input type="radio" id="light" name="theme" checked>
+                                                    </label>
 
+                                                    <label class="radio-group" >
+                                                        <input class="radio-input pink" id="pink" name="theme" type="radio" checked>
+                                                        <div class="radio-fill pink"></div>
+                                                        <label for="pink" class="visually-hidden">Pink</label>
+                                                    </label>
 
-                                                        <label for="pink" class="visually-hidden">Pink theme</label>
-                                                        <input type="radio" id="pink" name="theme">
+                                                    <label class="radio-group" >
+                                                        <input class="radio-input dark" id="dark" name="theme" type="radio">
+                                                        <div class="radio-fill dark"></div>
+                                                        <label for="dark" class="visually-hidden">Dark</label>
+                                                    </label>
 
-                                                        <label for="dark" class="visually-hidden">Dark theme</label>
-                                                        <input type="radio" id="dark" name="theme">
-                                                    </fieldset>
                                                 </form>
 
                                             </div>
@@ -1168,11 +1391,11 @@
         NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "show" : "";
     }
 
-    private string ModalShown { get; set; } = "";
+  private string ModalClosed { get; set; } = "";
 
     private void ToggleModal()
     {
-        ModalShown = string.IsNullOrWhiteSpace(ModalShown) ? "show" : "";
+        ModalClosed = string.IsNullOrWhiteSpace(ModalClosed) ? "show" : "";
     }
 
 
diff --git a/src/Connected.Components/Styles/components/_alerts.scss b/src/Connected.Components/Styles/components/_alerts.scss
new file mode 100644
index 0000000..1d0698b
--- /dev/null
+++ b/src/Connected.Components/Styles/components/_alerts.scss
@@ -0,0 +1,126 @@
+@use "../util" as *;
+@use "../globals" as *;
+
+.alert {
+  position: relative;
+  // background-color: var(--bg-core-primary-light);
+  background-color: rgba(255, 255, 255, 0.8);
+  margin-bottom: 0.75rem;
+  padding: 0.75rem;
+  border-radius: $border-radius-lg;
+  &:after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: $border-radius-lg;
+    opacity: 0.3;
+    pointer-events: none;
+  }
+}
+
+.alert.danger:after {
+  background-color: $danger;
+}
+.alert.danger .alert-leading-icon {
+  color: $danger;
+}
+
+.alert.warning:after {
+  background-color: $warning;
+}
+.alert.warning .alert-leading-icon {
+  color: $warning;
+}
+
+.alert.success:after {
+  background-color: $success;
+}
+.alert.success .alert-leading-icon {
+  color: $success;
+}
+
+.alert.info:after {
+  background-color: $info;
+}
+.alert.info .alert-leading-icon {
+  color: $info;
+}
+
+.alert-content {
+  --height: 2.5rem;
+
+  display: flex;
+
+  .alert-leading-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: $border-radius-pill;
+    background-color: transparent;
+    height: var(--height);
+    aspect-ratio: 1 / 1;
+    font-size: 2.5rem;
+    margin-right: 0.5rem;
+  }
+
+  .alert-message {
+    font-size: $base-font-size;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: center;
+    flex: 1;
+  }
+  .alert-cta-icon {
+    display: none;
+  }
+}
+
+.alert.alert-banner .alert-content .alert-cta-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $border-radius-pill;
+  background-color: transparent;
+  cursor: pointer;
+  height: var(--height);
+  aspect-ratio: 1 / 1;
+  transition: all 0.35s cubic-bezier(0.6, -1.25, 0.6, 2.25);
+  position: relative;
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.15);
+  }
+}
+
+/*SM*/
+.alert.alert-sm {
+  max-width: max-content;
+  margin-bottom: 0.5rem;
+  padding: 0.75rem 1.25rem 0.75rem 0.75rem;
+  &:after {
+    opacity: 0.2;
+  }
+}
+
+.alert.alert-sm .alert-content {
+  --height: 1.5rem;
+
+  .alert-leading-icon {
+    height: var(--height);
+    margin-right: 0.35rem;
+    font-size: 1.5rem;
+  }
+
+  .alert-message {
+    font-size: $font-size-sm;
+    margin-top: 0.1rem;
+  }
+  .alert-cta-icon {
+    margin-left: 0.35rem;
+  }
+}
+
+/*elevation*/
+.alert.elevation-1 {
+  box-shadow: $base-box-shadow;
+}
diff --git a/src/Connected.Components/Styles/components/_appbar.scss b/src/Connected.Components/Styles/components/_appbar.scss
index ac274ba..3b22911 100644
--- a/src/Connected.Components/Styles/components/_appbar.scss
+++ b/src/Connected.Components/Styles/components/_appbar.scss
@@ -16,7 +16,7 @@ $appbar-width-open: 300px;
   z-index: $appbar-zindex;
   transition: all 0.3s ease;
   // background: radial-gradient(rgba(255,255,255,.05), rgba(255,255,255,.025));
-  backdrop-filter: blur(15px);
+  //backdrop-filter: blur(15px);
   // margin-inline: -1.75rem;
   background: linear-gradient(
     to left,
diff --git a/src/Connected.Components/Styles/components/_buttons.scss b/src/Connected.Components/Styles/components/_buttons.scss
index d59f319..9f74e5f 100644
--- a/src/Connected.Components/Styles/components/_buttons.scss
+++ b/src/Connected.Components/Styles/components/_buttons.scss
@@ -130,11 +130,11 @@ $border-radius-btn: 100vw;
 
 
 .btn-core {
-  background-color: var(--bg-core-primary) !important;
+  background-color: var(--bg-core-primary-lighten) !important;
   color: set-color (var(--bg-core-primary-lighten)) !important;
   //color: rgba(255,255,255,.85) !important;
   &:hover {
-    background-color: var(--bg-core-primary-darken) !important;
+    background-color: var(--bg-core-primary) !important;
   }
   &:focus-visible,
   &.focus {
diff --git a/src/Connected.Components/Styles/components/_dropdown.scss b/src/Connected.Components/Styles/components/_dropdown.scss
index 5ac4e40..ee320fd 100644
--- a/src/Connected.Components/Styles/components/_dropdown.scss
+++ b/src/Connected.Components/Styles/components/_dropdown.scss
@@ -104,6 +104,13 @@
   background-color: var(--bg-core-primary-light);
 }
 
+.dropdown-item:active,
+.dropdown-item.active {
+  color: var(--text-core-hc);
+  text-decoration: none;
+  background-color: var(--bg-core-primary);
+}
+
 .dropdown-divider {
   height: 0;
   margin: 0.5rem 0;
diff --git a/src/Connected.Components/Styles/components/_grid.scss b/src/Connected.Components/Styles/components/_grid.scss
index cd99261..3be4f88 100644
--- a/src/Connected.Components/Styles/components/_grid.scss
+++ b/src/Connected.Components/Styles/components/_grid.scss
@@ -74,7 +74,7 @@ $columns: 12;
 
 .data-grid-row-content{
   display: grid;
-  grid-template-columns: auto auto 1fr auto;
+  grid-template-columns: auto 1fr auto;
 }
 
 .data-grid:not(.data-grid.dense) .data-grid-row-content {
@@ -90,6 +90,80 @@ $columns: 12;
     }
 }
 
+/*IMG*/
+.data-grid-container.show-image  {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  @include breakpoint(sm) {
+    grid-template-columns: auto 1fr;
+  }
+}
+
+.data-grid-container.show-image .data-grid-img {
+  --height:60px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.6rem;
+  background-color: var(--bg-core-primary-light);
+  height: var(--height);
+  max-width: var(--height);
+  width: 100%;
+  overflow: hidden;
+  margin-top: .5rem;
+  margin-right: .75rem;
+
+  @include breakpoint(sm) {
+    --height:60px;
+    height: var(--height);
+    max-width: var(--height);
+  }
+}
+
+/*vertical image on small screens*/
+.data-grid-container.show-image-vertical  { 
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: auto;
+  @include breakpoint(sm) {
+    grid-template-columns: auto 1fr;
+  }
+}
+
+.data-grid-container.show-image-vertical .data-grid-img {
+  --height:120px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.6rem;
+  background-color: var(--bg-core-primary-light);
+  height: var(--height);
+  max-width: 100%;
+  width: 100%;
+  overflow: hidden;
+  margin-top: .5rem;
+  margin-right: .75rem;
+
+  @include breakpoint(sm) {
+    --height:60px;
+    height: var(--height);
+    max-width: var(--height);
+  }
+}
+
+.data-grid-container.show-image .data-grid-img img {
+  object-fit: cover;
+  height: var(--height);
+  min-width: var(--height);
+  width: 100%;
+}
+
+.data-grid-container .data-grid-img{
+  display: none;
+}
+
 /*ACTIVE*/
 .data-grid:not(.data-grid.dense) .data-grid-row-content:before {
   content: "";
@@ -160,28 +234,6 @@ $columns: 12;
 }
 /*END DENSE ACTIVE*/
 
-/*IMG*/
-.data-grid.image .data-grid-img {
-  --height:60px;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0.6rem;
-  background-color: var(--bg-core-primary-light);
-  height: var(--height);
-  aspect-ratio: 1/1;
-  overflow: hidden;
-  margin-top: .5rem;
-  margin-right: .75rem;
-}
-
-.data-grid.image .data-grid-img img {
-  object-fit: cover;
-  height: var(--height);
-  aspect-ratio: 1/1;
-}
-
 
 /*SELECT*/
 .data-grid.select .data-grid-select {
@@ -190,7 +242,6 @@ $columns: 12;
   margin-right: .75rem;
 }
 
-.data-grid .data-grid-img,
 .data-grid .data-grid-select,
 .data-grid .data-grid-collapse-cta{
   display: none;
diff --git a/src/Connected.Components/Styles/components/_index.scss b/src/Connected.Components/Styles/components/_index.scss
index 623f83c..b649b83 100644
--- a/src/Connected.Components/Styles/components/_index.scss
+++ b/src/Connected.Components/Styles/components/_index.scss
@@ -16,4 +16,9 @@
 @forward "buttons-icons";
 @forward "dropdown";
 @forward "card";
-@forward "date-picker";
\ No newline at end of file
+@forward "date-picker";
+@forward "tabs";
+@forward "pagination";
+@forward "alerts";
+@forward "master-search";
+@forward "tooltip";
\ No newline at end of file
diff --git a/src/Connected.Components/Styles/components/_inputs.scss b/src/Connected.Components/Styles/components/_inputs.scss
index 935b75a..db2115b 100644
--- a/src/Connected.Components/Styles/components/_inputs.scss
+++ b/src/Connected.Components/Styles/components/_inputs.scss
@@ -13,7 +13,7 @@ form{
     position: relative;
     margin-top: 1rem;
     margin-bottom: 1.5rem;
-    flex: 1 0 300px;//TEMP
+    //flex: 1 0 300px;//TEMP
   }
   
   textarea {
@@ -194,95 +194,3 @@ form{
 .input-glyph.button.reset {
     display:none
 }
-
-/*form group-alt*/
-
-  .form-group-alt {
-    --height: 2.5rem;
-  
-    //border: 1px solid var(--bg-core-primary);
-    padding: .15rem;
-    height: max-content;
-    //min-width: max-content;
-    color: var(--text-core); 
-    border-radius: $border-radius-pill;
-    background-color: var(--bg-core-primary-light);
-    display: inline-block;
-    position:relative;
-    transition: $transition;
-
-  }
-  
-  .form-group-alt input {
-    border: none;
-    outline: none;
-    background: transparent;
-    font-family: inherit;
-}
-
-/* Chrome, Safari, Edge, Opera */
-.form-group-alt input::-webkit-outer-spin-button,
-.form-group-alt input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-/* Firefox */
-.form-group-alt input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.form-group-alt:focus-within {
-  background-color: var(--bg-core-primary-lighten);
-}
-
-
-  /*search*/
-
-  /* clears the 'X'*/
-  input[type="search"]::-webkit-search-decoration,
-  input[type="search"]::-webkit-search-cancel-button,
-  input[type="search"]::-webkit-search-results-button,
-  input[type="search"]::-webkit-search-results-decoration {
-    -webkit-appearance:none;
-  }
-
-  .form-group-alt .input-group-content{
-    height: var(--height);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .form-group-alt .input-leading-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: $border-radius-pill;
-    color: var(--text-core-lc);
-    height: var(--height);
-    aspect-ratio: 1 / 1;
-    overflow: hidden;  
-  }  
-  
-  .form-group-alt .input-cta-icon{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: $border-radius-pill;
-    background-color: transparent;
-    cursor: pointer;
-    height: var(--height);
-    aspect-ratio: 1 / 1; 
-    transition: all 0.35s cubic-bezier(0.6,-1.25,0.6,2.25);
-  }
-  
-  .form-group-alt .input-area{
-    flex: 1;
-  }
-  
-  .form-group-alt .input-cta-icon:hover{
-    background-color: var(--bg-core-primary-lighten);
-  }
-
-
diff --git a/src/Connected.Components/Styles/components/_master-search.scss b/src/Connected.Components/Styles/components/_master-search.scss
new file mode 100644
index 0000000..4d0abfb
--- /dev/null
+++ b/src/Connected.Components/Styles/components/_master-search.scss
@@ -0,0 +1,202 @@
+@use "../util" as *;
+@use "../globals" as *;
+
+/*form group-alt*/
+.form-group-alt {
+  --height: 2.5rem;
+
+  //border: 1px solid var(--bg-core-primary);
+  padding: 0.15rem;
+  height: max-content;
+  //min-width: max-content;
+  color: var(--text-core);
+  border-radius: $border-radius-pill;
+  background-color: var(--bg-core-primary-light);
+  display: inline-block;
+  position: relative;
+  isolation: isolate;
+  transition: $transition;
+}
+
+/*INPUT RESET*/
+.form-group-alt input {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+}
+
+/* Chrome, Safari, Edge, Opera */
+.form-group-alt input::-webkit-outer-spin-button,
+.form-group-alt input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+.form-group-alt input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+/* clears the 'X' in search*/
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+/*focus within*/
+.form-group-alt:focus-within {
+  background-color: var(--bg-core-primary-lighten);
+  background-color: #fff;
+}
+
+input[type="search"] {
+  //appearance: none;
+
+  &:focus-within ~ #search.search-drop-down {
+    opacity: 1;
+    pointer-events: initial;
+  }
+
+  &:focus-within ~ .backdrop {
+    opacity: 1;
+    display: block;
+  }
+}
+
+.input-cta-icon {
+  &:focus-within ~ #select.search-drop-down {
+    opacity: 1;
+    pointer-events: initial;
+  }
+
+  &:focus-within ~ .backdrop {
+    opacity: 1;
+    display: block;
+  }
+}
+
+/*SEARCH CONTENT*/
+.form-group-alt .input-group-content {
+  height: var(--height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.form-group-alt .input-leading-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $border-radius-pill;
+  color: var(--text-core-lc);
+  height: var(--height);
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.form-group-alt .input-cta-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border-radius: $border-radius-pill;
+  background-color: transparent;
+  cursor: pointer;
+  height: var(--height);
+  aspect-ratio: 1 / 1;
+  z-index: 1;
+  transition: all 0.35s cubic-bezier(0.6, -1.25, 0.6, 2.25);
+  &:focus-visible,
+  &.focus {
+    outline: 0;
+    box-shadow: 0 0 0.5rem var(--bg-core-primary-lighten);
+  }
+}
+
+.input-cta-icon-more {
+  position: absolute;
+  right: -7px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.form-group-alt .input-area {
+  flex: 1;
+}
+
+.form-group-alt input {
+  &:focus-visible,
+  &.focus {
+    outline: 0;
+  }
+}
+
+.form-group-alt .input-cta-icon:hover {
+  background-color: var(--bg-core-primary-lighten);
+}
+
+/*DROPDOWN*/
+.search-drop-down {
+  position: absolute;
+  top: 25px;
+  left: 0;
+  padding-top: 1.5rem;
+  min-width: 100%;
+  width: 100%;
+  height: auto;
+  max-height: calc(100dvh - 85px);
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  opacity: 0;
+  z-index: -1;
+  list-style: none;
+  background-color: #fff;
+  box-shadow: $base-box-shadow;
+  border-radius: 0 0 1.5rem 1.5rem;
+  transition: all 0.3s ease-in-out;
+}
+
+.dropdown-menu {
+  height: auto;
+  overflow: auto;
+  margin-bottom: 1rem;
+}
+
+.dropdown-header {
+  display: block;
+  padding: 0.5rem 1.5rem;
+  margin-bottom: 0;
+  font-size: $font-size-sm;
+  color: var(--text-core-lc);
+  white-space: nowrap;
+}
+
+.dropdown-item {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 1.5rem;
+  clear: both;
+  color: inherit;
+  text-align: inherit;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+}
+
+.dropdown-item:focus,
+.dropdown-item:hover {
+  color: var(--text-core-hc);
+  text-decoration: none;
+  background-color: var(--bg-core-primary-light);
+}
+
+.dropdown-divider {
+  height: 0;
+  margin: 0.5rem 0;
+  overflow: hidden;
+  border-top: 1px solid var(--bg-core-primary-light);
+}
diff --git a/src/Connected.Components/Styles/components/_modal.scss b/src/Connected.Components/Styles/components/_modal.scss
index 7914a0e..de020ec 100644
--- a/src/Connected.Components/Styles/components/_modal.scss
+++ b/src/Connected.Components/Styles/components/_modal.scss
@@ -58,9 +58,6 @@
     // Prevent Chrome on Windows from adding a focus outline. For details, see
     // https://github.com/twbs/bootstrap/pull/10951.
     outline: 0;
-    // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
-    // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
-    // See also https://github.com/twbs/bootstrap/issues/17695
   }
   
 
@@ -226,4 +223,106 @@
     //   .modal-backdrop.show {
     //     display: block;
     // }
-    
+
+
+/*IMAGE MODAL*/
+.modal.modal-image{
+
+  --modal-image-height: 80vh;
+  --modal-image-border-width: 0;
+ 
+  
+  .modal-content{
+    overflow: hidden;
+    height: var( --modal-image-height);
+    border: var(--modal-image-border-width);
+  }
+
+  button.close{
+    float: right;
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    font-size: 1.5rem;
+    font-weight: 500;
+    line-height: 0;
+    text-shadow: none;
+    color: inherit;
+    background-color: rgba(255,255,255,.35);
+    &:hover{
+      background-color: rgba(255,255,255,.5);
+    }
+  }
+
+img{
+  height: 100%;
+  object-fit:cover;
+  }
+}
+
+
+/*ACTION MODAL*/
+.modal.modal-basic{
+
+  --modal-basic-width: 40vw;
+  --modal-basic-height: 40vh;
+  --modal-basic-padding: 1.5rem;
+  --modal-basic-color: var(--text-core);
+  --modal-basic-bg: var(--bg-core-primary-light);
+  --modal-basic-border-color: var(--bg-core-primary-light);
+  --modal-basic-border-width: 1px;
+  --modal-basic-border-radius: 1rem;
+
+  --modal-basic-header-bg: var(--modal-basic-bg);
+  --modal-basic-header-padding: 1.5rem 1.5rem 0;  
+  --modal-basic-header-border-color: var(--bg-core-primary-light);
+  --modal-basic-header-border-width: 1px;
+  
+  --modal-basic-footer-bg: var(--modal-basic-bg);
+  --modal-basic-footer-padding: 0 1.5rem 1.5rem;  
+  --modal-basic-footer-border-color: var(--bg-core-primary-light);
+  --modal-basic-footer-border-width: 1px; 
+
+
+.modal-header {
+  padding: var(--modal-basic-header-padding);
+  background-color: var(--modal-basic-header-bg);
+  border-bottom: var(--modal-basic-header-border-width) solid var(--modal-basic-header-border-color);
+} 
+
+.modal-body {
+  position: relative;
+  flex: 1 1 auto;
+  padding: var(--modal-basic-padding);
+}
+
+.modal-footer {   
+  padding: var(--modal-basic-footer-padding);
+  background-color: var(--modal-basic-footer-bg);
+  border-radius: var(--modal-basic-border-radius);  
+}
+
+.modal-dialog { 
+  max-width: 100%;
+  max-height: 100%;
+  padding: 0;
+
+  @include breakpoint(sm) {
+    max-width: 75vw;
+    margin-right: auto;
+    margin-left: auto;
+    padding: var(--modal-basic-padding);
+    }  
+  
+  @include breakpoint(lg) {
+    max-width: var(--modal-basic-width);
+    margin-right: auto;
+    margin-left: auto;
+    }
+  }
+
+}
+  
+
+
+
diff --git a/src/Connected.Components/Styles/components/_pagination.scss b/src/Connected.Components/Styles/components/_pagination.scss
new file mode 100644
index 0000000..3bd375f
--- /dev/null
+++ b/src/Connected.Components/Styles/components/_pagination.scss
@@ -0,0 +1,129 @@
+@use "../util" as *;
+@use "../globals" as *;
+
+.pagination {
+  width: 100%;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  align-items: center;
+  justify-content: flex-end;
+  margin: 0;
+  list-style: none;
+
+  /*RECTANGULAR*/
+  &.square .pagination-item .btn {
+    border-radius: $base-border-radius;
+  }
+  /*TEXT*/
+  &
+    .pagination-item
+    .btn:not([aria-label="Next page"], [aria-label="Previous page"]) {
+    background-color: transparent;
+    color: inherit;
+    &:hover {
+      background-color: var(--bg-core-primary) !important;
+    }
+    &:focus-visible,
+    &.focus {
+      outline: 0;
+      box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten);
+    }
+    &:active,
+    &.active {
+      background-color: var(--bg-core-primary-darken) !important;
+    }
+  }
+  /*FILLED*/
+  &.filled
+    .pagination-item
+    .btn:not([aria-label="Next page"], [aria-label="Previous page"]) {
+    background-color: var(--bg-core-primary-lighten);
+    color: set-color var(--bg-core-primary-lighten);
+    &:hover {
+      background-color: var(--bg-core-primary) !important;
+    }
+    &:focus-visible,
+    &.focus {
+      outline: 0;
+      box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten);
+    }
+    &:active,
+    &.active {
+      background-color: var(--bg-core-primary-darken) !important;
+    }
+  }
+  /*OUTLINED*/
+  &.outlined
+    .pagination-item
+    .btn:not([aria-label="Next page"], [aria-label="Previous page"]) {
+    background-color: transparent;
+    color: var(--bg-core-primary-dark);
+    border: 1px solid var(--bg-core-primary-dark);
+    &:hover {
+      color: var(--text-core) !important;
+      border: 1px solid var(--bg-core-primary-dark) !important;
+    }
+    &:focus-visible,
+    &.focus {
+      outline: 0;
+      box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten);
+    }
+    &:active,
+    &.active {
+      background-color: var(--bg-core-primary-darken) !important;
+      color: set-color (var(--bg-core-primary-darken)) !important;
+    }
+  }
+
+  .pagination-item {
+    & > * {
+      height: 2rem;
+      min-width: 2rem;
+      margin: 0 3px;
+      padding: 0 6px;
+      text-align: center;
+      border-radius: 1rem;
+      font-size: $font-size-sm;
+    }
+
+    :not(pagination-item-selected) > * {
+      box-shadow: none;
+    }
+
+    .typography[disabled] {
+      color: #ccc !important;
+    }
+  }
+
+  &-small {
+    .pagination-item {
+      & > * {
+        height: 26px;
+        min-width: 26px;
+        margin: 0 1px;
+        padding: 0 4px;
+        border-radius: 13px;
+      }
+    }
+  }
+
+  &-large {
+    .pagination-item {
+      & > * {
+        height: 40px;
+        min-width: 40px;
+        padding: 0 10px;
+        border-radius: 20px;
+      }
+    }
+  }
+
+  &-disable-elevation .pagination-item .btn {
+    box-shadow: none;
+  }
+
+  &-rtl .pagination-item .icon-root {
+    transform: scaleX(-1);
+  }
+}
diff --git a/src/Connected.Components/Styles/components/_radio.scss b/src/Connected.Components/Styles/components/_radio.scss
index e132d57..7b1dc36 100644
--- a/src/Connected.Components/Styles/components/_radio.scss
+++ b/src/Connected.Components/Styles/components/_radio.scss
@@ -42,9 +42,9 @@ $radio-disabled-color: darken($radio-secondary-color, 25%);
   width: var(--width);
   height: var(--height);
   border-radius: 50%;
-  background: transperent;
+  background-color: transperent;
   border: 2px solid $radio-primary-color;
-  transition: background 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out;
   }
   
 .radio-input:checked ~ .radio-fill {
diff --git a/src/Connected.Components/Styles/components/_sidebar.scss b/src/Connected.Components/Styles/components/_sidebar.scss
index 9c287b1..90c2331 100644
--- a/src/Connected.Components/Styles/components/_sidebar.scss
+++ b/src/Connected.Components/Styles/components/_sidebar.scss
@@ -239,7 +239,7 @@ $sidebar-right-width-closed:0px;
     list-style: none;
     transition: all 0.4s ease;
     margin-bottom: 12px;
-    line-height: 50px;
+   // line-height: 50px;
     border-radius: $border-radius-pill;
   }
 
@@ -266,16 +266,16 @@ $sidebar-right-width-closed:0px;
     background-color: var(--accent-color-hover);
   }
 
-  .sidebar .navbar .navbar-item i {
-    height: 50px;
-    min-width: 50px;
-    text-align: center;
-    line-height: 50px;
-    color: var(--text-core-lc);
-    font-size: 22px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-  }
+  // .sidebar .navbar .navbar-item i {
+  //   height: 50px;
+  //   min-width: 50px;
+  //   text-align: center;
+  //   //line-height: 50px;
+  //   color: var(--text-core-lc);
+  //   font-size: 22px;
+  //   cursor: pointer;
+  //   transition: all 0.3s ease;
+  // }
 
   //  .sidebar .navbar .navbar-item svg {
   //   height: 26px;
@@ -339,37 +339,37 @@ $sidebar-right-width-closed:0px;
 
 
 /*TOOLTIP*/
-  .sidebar.close .navbar .navbar-item .navbar-tooltip{
-    position: absolute;
-    background: #fff;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);  
-    width: max-content;
-    left: calc(100% + 12px);
-    top: 0;
-    margin-top: 0;
-    padding: 10px 20px;
-    border-radius: $border-radius-lg;
-    opacity: 0;
-    display: block;
-    pointer-events: none;
-    transition: 0s;
-  }
+  // .sidebar.close .navbar .navbar-item .navbar-tooltip{
+  //   position: absolute;
+  //   background: #fff;
+  //   box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);  
+  //   width: max-content;
+  //   left: calc(100% + 12px);
+  //   top: 0;
+  //   margin-top: 0;
+  //   padding: 10px 20px;
+  //   border-radius: $border-radius-lg;
+  //   opacity: 0;
+  //   display: block;
+  //   pointer-events: none;
+  //   transition: 0s;
+  // }
 
-  .sidebar.close .navbar .navbar-item:hover .navbar-tooltip{
-    left: calc(100% + 24px);
-    opacity: 1;
-    pointer-events: auto;
-    transition: all 0.4s ease;
-  }
+  // .sidebar.close .navbar .navbar-item:hover .navbar-tooltip{
+  //   left: calc(100% + 24px);
+  //   opacity: 1;
+  //   pointer-events: auto;
+  //   transition: all 0.4s ease;
+  // }
 
-  .sidebar.close .navbar .navbar-tooltip {
-    opacity: 1;
-    display: block;
-  }
+  // .sidebar.close .navbar .navbar-tooltip {
+  //   opacity: 1;
+  //   display: block;
+  // }
 
-  .sidebar .navbar .navbar-tooltip {
-    display: none;
-  }
+  // .sidebar .navbar .navbar-tooltip {
+  //   display: none;
+  // }
  
 
 
diff --git a/src/Connected.Components/Styles/components/_tabs.scss b/src/Connected.Components/Styles/components/_tabs.scss
new file mode 100644
index 0000000..92bd906
--- /dev/null
+++ b/src/Connected.Components/Styles/components/_tabs.scss
@@ -0,0 +1,310 @@
+@use "../globals/" as *;
+@use "../util/" as *;
+
+
+
+.tabs {
+    display: flex;
+    flex-direction: column;
+
+    &.tabs-reverse {
+        flex-direction: column-reverse;
+    }
+
+    &.tabs-vertical {
+        flex-direction: row;
+    }
+
+    &.tabs-vertical-reverse {
+        flex-direction: row-reverse;
+    }
+
+    &.tabs-rounded {
+        border-radius: $base-border-radius;
+
+        .tabs-toolbar {
+            border-radius: $base-border-radius;
+        }
+
+        .tabs-panels {
+            border-radius: $base-border-radius;
+        }
+    }
+}
+
+.tabs-toolbar {    
+    position: relative;
+    background-color: var(--bg-core-primary-light);
+
+    &.tabs-border-left {
+        border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+        border-right: 1px solid $element-fg-core;
+    }
+
+    &.tabs-border-right {
+        border-top-left-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+        border-left: 1px solid $element-fg-core;
+    }
+
+    &.tabs-border-top {
+        border-bottom-left-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+        border-bottom: 1px solid $element-fg-core;
+    }
+
+    &.tabs-border-bottom {
+        border-top-left-radius: 0 !important;
+        border-top-right-radius: 0 !important;
+        border-top: 1px solid $element-fg-core;
+    }
+
+    &.tabs-rounded {
+        border-radius: $base-border-radius;
+    }
+
+    &.tabs-vertical {
+        .tabs-toolbar-inner {
+            flex-direction: column;
+
+            .tabs-scroll-button {
+                .button-root {
+                    width: 100%;
+                    border-radius: 0px;
+                    height: 32px;
+
+                    .icon-button-label {
+                        .icon-root{
+                            transform:rotate(90deg);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    & .tabs-toolbar-inner {
+        display: flex;
+        min-height: 48px;
+        align-items: center;
+    }
+}
+
+
+.tabs-toolbar-content {
+    width: 100%;
+    flex: 1 1 auto;
+    display: inline-block;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+
+    & .tabs-toolbar-wrapper {
+        width: max-content;
+        position: inherit;
+        display: flex;
+        transition: .3s cubic-bezier(.25,.8,.5,1);
+
+        &.tabs-centered {
+            margin: auto;
+        }
+
+        &.tabs-vertical {
+            flex-direction: column;
+        }
+    }
+}
+
+.tabs-panels {
+    position: relative;
+    transition: .3s cubic-bezier(.25,.8,.5,1);
+
+    &.tabs-vertical {
+        display: flex;
+        flex-grow: 1;
+    }
+}
+
+.tab {
+    width:100%;
+    min-width: 160px;
+    display: inline-flex;
+    padding: 6px 12px;
+    min-height: 48px;
+    flex-shrink: 0;
+    flex-shrink: 1;
+    font-weight: 500;
+    line-height: 1.75;
+    user-select: none;
+    white-space: normal;
+    letter-spacing: 0.02857em;
+    text-transform: uppercase;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    &:hover {
+        cursor: pointer;
+        background-color: var(--bg-core-primary-lighten);
+    }
+
+    &.tab-active {
+        color: var(--bg-core-primary-darken);
+
+        &:hover {
+            background-color: var(--bg-core-primary-darken);
+            color: var(--bg-core-primary-light);
+        }
+    }
+
+    &.disabled {
+        cursor: default;
+        pointer-events: none;
+        color: #ccc;
+    }
+
+    & .tab-icon-text {
+        margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: unset;
+    }
+}
+
+.tab-slider {
+    position: absolute;
+    background: var(--bg-core-primary-darken);
+
+    &.tab-slider-horizontal {
+        height: 2px;
+        left: 0;
+        bottom: 0;
+        transition: left .3s cubic-bezier(.64,.09,.08,1);
+        will-change: left;
+
+        &.tab-slider-horizontal-reverse {
+            top: 0px;
+        }
+    }
+
+    &.tab-slider-vertical {
+        width: 2px;
+        right: 0;
+        transition: top .3s cubic-bezier(.64,.09,.08,1);
+        will-change: top;
+
+        &.tab-slider-vertical-reverse {
+            left: 0;
+            right: unset;
+        }
+    }
+}
+
+.tab-badge{
+    margin-left:8px;
+    margin-inline-start: 8px;
+    margin-inline-end: unset;
+}
+
+@each $key, $val in $theme-colors {
+    .tabs-toolbar-#{$key} {
+        background-color: $val;
+        color: set-color($val);
+
+        .tab-slider {
+            background: lighten($val, 10);
+        }
+
+        .tab {
+            &.tab-active {
+                color: darken($val, 10);
+
+                &:hover {
+                    background-color: darken($val, 20);
+                }
+            }
+        }
+    }
+}
+
+
+
+.tab-transition {
+    &-enter {
+        transform: translate(100%, 0);
+    }
+
+    &-leave, &-leave-active {
+        position: absolute;
+        top: 0;
+    }
+
+    &-leave-to {
+        position: absolute;
+        transform: translate(-100%, 0);
+    }
+}
+
+.tab-reverse-transition {
+    &-enter {
+        transform: translate(-100%, 0);
+    }
+
+    &-leave, &-leave-to {
+        top: 0;
+        position: absolute;
+        transform: translate(100%, 0);
+    }
+}
+
+.dynamic-tabs {
+    .tabs-toolbar {
+        .tab {
+            padding: 6px 14px;
+
+            .icon-button {
+                padding: 4px;
+                margin-right: -4px;
+                margin-inline-end: -4px;
+                margin-inline-start: unset;
+            }
+
+            .tabs-panel-header-before {
+                padding-right: 8px;
+                padding-inline-end: 8px;
+                padding-inline-start: unset;
+            }
+
+            .tabs-panel-header-after {
+                padding-left: 8px;
+                padding-inline-start: 8px;
+                padding-inline-end: unset;
+            }
+        }
+    }
+}
+
+.tabs-header {
+    &.tabs-header-before {
+        display: inherit;
+    }
+
+    &.tabs-header-after {
+        display: inherit;
+    }
+}
+
+.tabs-panel-header {
+    display: flex;
+    flex: 1 1 auto;
+
+    &.tabs-panel-header-before {
+        justify-content: flex-start;
+    }
+
+    &.tabs-panel-header-after {
+        justify-content: flex-end;
+    }
+}
+
diff --git a/src/Connected.Components/Styles/components/_tooltip.scss b/src/Connected.Components/Styles/components/_tooltip.scss
new file mode 100644
index 0000000..eb06256
--- /dev/null
+++ b/src/Connected.Components/Styles/components/_tooltip.scss
@@ -0,0 +1,501 @@
+@use "../globals/" as *;
+@use "../util/" as *;
+
+
+/*Define a data-tooltip attribute in your element.*/
+/*<span data-tooltip="(description here)"></span>*/
+
+/*Additionally, you can define a data-tooltip-conf attribute to either change position,type or use a feature.*/
+/*<span data-tooltip="..." data-tooltip-conf="(right, bottom, left), (success, warning, danger, info) small delay no-fading shadow multiline no-arrow square"></span>
+*/
+
+
+//Primary-color
+$tooltip-base-text-color: var(--text-core);
+$tooltip-base-bg-color:#fff;
+$tooltip-base-border-color:#fff;
+
+//Types
+$tooltip-invert-bg-color: var(--bg-core-primary-lighten);
+$tooltip-invert-text-color: var(--text-core);
+$tooltip-success-bg-color: lighten($success, 17);
+$tooltip-info-bg-color: lighten($info, 17);
+$tooltip-warning-bg-color: lighten($warning, 17);
+$tooltip-danger-bg-color: lighten($danger, 17);
+
+$arrow-size: 8px;
+$animation-type: cubic-bezier(.73, .01, 0, 1);
+
+
+
+[data-tooltip] {
+  position: relative;
+  &:before,
+  &:after {
+    opacity: 0;
+    position: absolute;
+    left: 50%;
+    backface-visibility: hidden
+  }
+  &:before {
+    border-style: solid;
+    border-top-width: $arrow-size;
+    border-right-width: $arrow-size;
+    border-bottom-width: $arrow-size;
+    border-left-width: $arrow-size;
+    border-bottom-width: 0;
+    content: '';
+    top: calc($arrow-size / -2);
+    width: 0;
+    height: 0;
+    transform: translate(-50%, calc(-50% - $arrow-size * 1.5));
+    transition: opacity .1s $animation-type 0s, transform .6s $animation-type 0s, -webkit-transform .6s $animation-type 0s;
+    z-index: $tooltip-zindex;
+  }
+  &:after {
+    content: attr(data-tooltip);
+    text-align: center;
+    padding: 0.6rem 1rem;
+    font-size: $base-font-size;
+    text-transform: initial;
+    border-radius: $base-border-radius;
+    color: $tooltip-base-text-color;
+    transition: opacity .3s $animation-type, transform .3s $animation-type, -webkit-transform .3s $animation-type;
+    pointer-events: none;
+    z-index: $tooltip-zindex;
+    white-space: nowrap;
+    bottom: 100%;
+    transform: translate(-50%, calc($arrow-size * 3));
+    max-width: 320px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+   // box-shadow: $base-box-shadow;
+  }
+}
+
+[data-tooltip]:after {
+  background: $tooltip-base-bg-color;
+}
+
+[data-tooltip]:before {
+  border-top-color: $tooltip-base-bg-color;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent
+}
+
+[data-tooltip][data-tooltip-conf*=right]:before {
+  border-top-color: transparent;
+  border-right-color: $tooltip-base-border-color;
+  border-bottom-color: transparent;
+  border-left-color: transparent
+}
+
+[data-tooltip][data-tooltip-conf*=bottom]:before {
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: $tooltip-base-border-color;
+  border-left-color: transparent
+}
+
+[data-tooltip][data-tooltip-conf*=left]:before {
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: $tooltip-base-border-color;
+}
+
+[data-tooltip] {
+  &:focus,
+  &:hover {
+    &:before,
+    &:after {
+      opacity: 1;
+    }
+  }
+  &:focus,
+  &:hover {
+    &:before {
+      transition: opacity .1s $animation-type .1s, transform .6s $animation-type .1s, -webkit-transform .6s $animation-type .1s;
+      transform: translate(-50%, calc(-50% - $arrow-size / 2));
+    }
+    &:after {
+      transform: translate(-50%, calc($arrow-size * -1.5));
+    }
+  }
+}
+
+
+
+[data-tooltip][data-tooltip-conf*=right]:before {
+  border-style: solid;
+  border-top-width: $arrow-size;
+  border-right-width: $arrow-size;
+  border-bottom-width: $arrow-size;
+  border-left-width: $arrow-size;
+  border-left-width: 0;
+  left: auto;
+  right: calc($arrow-size * -1.5);
+  top: 50%;
+  transform: translate(calc(-50% + $arrow-size * 1.75), -50%)
+}
+
+[data-tooltip][data-tooltip-conf*=right]:after {
+  top: 50%;
+  left: 100%;
+  bottom: auto;
+  -webkit-transform: translate(calc($arrow-size * -3), -50%);
+  transform: translate(calc($arrow-size * -3), -50%)
+}
+
+[data-tooltip][data-tooltip-conf*=right]:focus:before,
+[data-tooltip][data-tooltip-conf*=right]:hover:before {
+  -webkit-transform: translate(calc(-50% + $arrow-size * 0.75), -50%);
+  transform: translate(calc(-50% + $arrow-size * 0.75), -50%)
+}
+
+[data-tooltip][data-tooltip-conf*=right]:focus:after,
+[data-tooltip][data-tooltip-conf*=right]:hover:after {
+  -webkit-transform: translate(calc($arrow-size * 1.75), -50%);
+  transform: translate(calc($arrow-size * 1.75), -50%)
+}
+
+[data-tooltip][data-tooltip-conf*=bottom]:before {
+  border-style: solid;
+  border-top-width: $arrow-size;
+  border-right-width: $arrow-size;
+  border-bottom-width: $arrow-size;
+  border-left-width: $arrow-size;
+  border-top-width: 0;
+  top: auto;
+  bottom: calc($arrow-size * -1.5);
+  left: 50%;
+  -webkit-transform: translate(-50%, calc(-50% + $arrow-size * 1.5));
+  transform: translate(-50%, calc(-50% + $arrow-size * 1.5))
+}
+
+[data-tooltip][data-tooltip-conf*=bottom]:after {
+  top: 100%;
+  left: 50%;
+  bottom: auto;
+  -webkit-transform: translate(-50%, calc($arrow-size * -3));
+  transform: translate(-50%, calc($arrow-size * -3))
+}
+
+[data-tooltip][data-tooltip-conf*=bottom]:focus:before,
+[data-tooltip][data-tooltip-conf*=bottom]:hover:before {
+  -webkit-transform: translate(-50%, calc(-50% + $arrow-size / 2));
+  transform: translate(-50%, calc(-50% + $arrow-size / 2))
+}
+
+[data-tooltip][data-tooltip-conf*=bottom]:focus:after,
+[data-tooltip][data-tooltip-conf*=bottom]:hover:after {
+  -webkit-transform: translate(-50%, calc($arrow-size * 1.5));
+  transform: translate(-50%, calc($arrow-size * 1.5))
+}
+
+[data-tooltip][data-tooltip-conf*=left]:before {
+  border-style: solid;
+  border-top-width: $arrow-size;
+  border-right-width: $arrow-size;
+  border-bottom-width: $arrow-size;
+  border-left-width: $arrow-size;
+  border-right-width: 0;
+  left: calc($arrow-size / -2);
+  top: 50%;
+  width: 0;
+  height: 0;
+  -webkit-transform: translate(calc(-50% - $arrow-size * 2), -50%);
+  transform: translate(calc(-50% - $arrow-size * 2), -50%)
+}
+
+[data-tooltip][data-tooltip-conf*=left]:after {
+  top: 50%;
+  right: 100%;
+  bottom: auto;
+  left: auto;
+  -webkit-transform: translate(calc($arrow-size * 3), -50%);
+  transform: translate(calc($arrow-size * 3), -50%)
+}
+
+[data-tooltip][data-tooltip-conf*=left]:focus:after,
+[data-tooltip][data-tooltip-conf*=left]:hover:after {
+  -webkit-transform: translate(calc($arrow-size * -1.75), -50%);
+  transform: translate(calc($arrow-size * -1.75), -50%)
+}
+
+[data-tooltip][data-tooltip-conf*=left]:focus:before,
+[data-tooltip][data-tooltip-conf*=left]:hover:before {
+  -webkit-transform: translate(calc(-50% - $arrow-size * 0.75), -50%);
+  transform: translate(calc(-50% - $arrow-size * 0.75), -50%)
+}
+
+[data-tooltip][data-tooltip-conf*=multiline]:after {
+  word-break: break-word;
+  white-space: normal;
+  min-width: 180px;
+  text-overflow: clip
+}
+
+[data-tooltip][data-tooltip-conf*=delay]:before {
+  -webkit-transition: opacity .2s $animation-type 0s, -webkit-transform .3s $animation-type 0s;
+  transition: opacity .2s $animation-type 0s, -webkit-transform .3s $animation-type 0s;
+  transition: opacity .2s $animation-type 0s, transform .3s $animation-type 0s;
+  transition: opacity .2s $animation-type 0s, transform .3s $animation-type 0s, -webkit-transform .3s $animation-type 0s
+}
+
+[data-tooltip][data-tooltip-conf*=delay]:after {
+  -webkit-transition: opacity .3s $animation-type 0s, -webkit-transform .3s $animation-type 0s;
+  transition: opacity .3s $animation-type 0s, -webkit-transform .3s $animation-type 0s;
+  transition: opacity .3s $animation-type 0s, transform .3s $animation-type 0s;
+  transition: opacity .3s $animation-type 0s, transform .3s $animation-type 0s, -webkit-transform .3s $animation-type 0s
+}
+
+[data-tooltip][data-tooltip-conf*=delay]:focus:before,
+[data-tooltip][data-tooltip-conf*=delay]:hover:before {
+  -webkit-transition: opacity .2s $animation-type .5s, -webkit-transform .6s $animation-type .5s;
+  transition: opacity .2s $animation-type .5s, -webkit-transform .6s $animation-type .5s;
+  transition: opacity .2s $animation-type .5s, transform .6s $animation-type .5s;
+  transition: opacity .2s $animation-type .5s, transform .6s $animation-type .5s, -webkit-transform .6s $animation-type .5s
+}
+
+[data-tooltip][data-tooltip-conf*=delay]:focus:after,
+[data-tooltip][data-tooltip-conf*=delay]:hover:after {
+  -webkit-transition: opacity .3s $animation-type .4s, -webkit-transform .3s $animation-type .4s;
+  transition: opacity .3s $animation-type .4s, -webkit-transform .3s $animation-type .4s;
+  transition: opacity .3s $animation-type .4s, transform .3s $animation-type .4s;
+  transition: opacity .3s $animation-type .4s, transform .3s $animation-type .4s, -webkit-transform .3s $animation-type .4s
+}
+
+
+[data-tooltip][data-tooltip-conf*=small]:after {
+  font-size: $font-size-sm;
+  padding: .5rem .75rem;
+}
+
+[data-tooltip][data-tooltip-conf*=shadow]:after {
+  //box-shadow: 0 2px 10px 2px rgba(0, 0, 0, .1)
+   box-shadow: $base-box-shadow;
+}
+
+[data-tooltip][data-tooltip-conf*=no-fading]:after,
+[data-tooltip][data-tooltip-conf*=no-fading]:before {
+  -webkit-transition: none;
+  transition: none
+}
+
+[data-tooltip][data-tooltip-conf*=no-arrow]:before {
+  display: none
+}
+
+[data-tooltip][data-tooltip-conf*=square]:after {
+  border-radius: 0
+}
+
+[data-tooltip][data-tooltip-conf*=invert]:after {
+  color: $tooltip-invert-text-color;
+  background: $tooltip-invert-bg-color;
+}
+
+[data-tooltip][data-tooltip-conf*=invert]:before {
+  border-top-color: $tooltip-invert-bg-color;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent
+}
+
+[data-tooltip][data-tooltip-conf*=invert][data-tooltip-conf*=right]:before {
+  border-top-color: transparent;
+  border-right-color: $tooltip-invert-bg-color;
+  border-bottom-color: transparent;
+  border-left-color: transparent
+}
+
+[data-tooltip][data-tooltip-conf*=invert][data-tooltip-conf*=bottom]:before {
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: $tooltip-invert-bg-color;
+  border-left-color: transparent
+}
+
+[data-tooltip][data-tooltip-conf*=invert][data-tooltip-conf*=left]:before {
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: $tooltip-invert-bg-color;
+}
+
+[data-tooltip][data-tooltip-conf*=success]:after {
+  background: $tooltip-success-bg-color;
+}
+
+[data-tooltip][data-tooltip-conf*=success]:before {
+  border-top-color: $tooltip-success-bg-color;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent
+}
+
+[data-tooltip][data-tooltip-conf*=success][data-tooltip-conf*=right]:before {
+  border-top-color: transparent;
+  border-right-color: $tooltip-success-bg-color;
+  border-bottom-color: transparent;
+  border-left-color: transparent
+}
+
+[data-tooltip][data-tooltip-conf*=success][data-tooltip-conf*=bottom]:before {
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: $tooltip-success-bg-color;
+  border-left-color: transparent
+}
+
+[data-tooltip][data-tooltip-conf*=success][data-tooltip-conf*=left]:before {
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: $tooltip-success-bg-color;
+}
+
+[data-tooltip][data-tooltip-conf*=info]:after {
+  background: $tooltip-info-bg-color;
+}
+
+[data-tooltip][data-tooltip-conf*=info]:before {
+  border-top-color: $tooltip-info-bg-color;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent
+}
+
+[data-tooltip][data-tooltip-conf*=info][data-tooltip-conf*=right]:before {
+  border-top-color: transparent;
+  border-right-color: $tooltip-info-bg-color;
+  border-bottom-color: transparent;
+  border-left-color: transparent
+}
+
+[data-tooltip][data-tooltip-conf*=info][data-tooltip-conf*=bottom]:before {
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: $tooltip-info-bg-color;
+  border-left-color: transparent
+}
+
+[data-tooltip][data-tooltip-conf*=info][data-tooltip-conf*=left]:before {
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: $tooltip-info-bg-color;
+}
+
+[data-tooltip][data-tooltip-conf*=warning]:after {
+  background: $tooltip-warning-bg-color;
+}
+
+[data-tooltip][data-tooltip-conf*=warning]:before {
+  border-top-color: $tooltip-warning-bg-color;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent
+}
+
+[data-tooltip][data-tooltip-conf*=warning][data-tooltip-conf*=right]:before {
+  border-top-color: transparent;
+  border-right-color: $tooltip-warning-bg-color;
+  border-bottom-color: transparent;
+  border-left-color: transparent
+}
+
+[data-tooltip][data-tooltip-conf*=warning][data-tooltip-conf*=bottom]:before {
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: $tooltip-warning-bg-color;
+  border-left-color: transparent
+}
+
+[data-tooltip][data-tooltip-conf*=warning][data-tooltip-conf*=left]:before {
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: $tooltip-warning-bg-color;
+}
+
+[data-tooltip][data-tooltip-conf*=danger]:after {
+  background: $tooltip-danger-bg-color;
+}
+
+[data-tooltip][data-tooltip-conf*=danger]:before {
+  border-top-color: $tooltip-danger-bg-color;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent
+}
+
+[data-tooltip][data-tooltip-conf*=danger][data-tooltip-conf*=right]:before {
+  border-top-color: transparent;
+  border-right-color: $tooltip-danger-bg-color;
+  border-bottom-color: transparent;
+  border-left-color: transparent
+}
+
+[data-tooltip][data-tooltip-conf*=danger][data-tooltip-conf*=bottom]:before {
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: $tooltip-danger-bg-color;
+  border-left-color: transparent
+}
+
+[data-tooltip][data-tooltip-conf*=danger][data-tooltip-conf*=left]:before {
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: $tooltip-danger-bg-color;
+}
+
+
+/*INHERIT*/
+
+$tooltip-inherit-bg-color: inherit;
+$tooltip-border-bg-color: $tooltip-inherit-bg-color;
+
+
+[data-tooltip][data-tooltip-conf*=inherit]:after {    
+    background: $tooltip-inherit-bg-color;
+  }
+  
+  [data-tooltip][data-tooltip-conf*=inherit]:before {
+    border-top-color: $tooltip-inherit-bg-color;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+    border-left-color: transparent
+  }
+  
+  [data-tooltip][data-tooltip-conf*=inherit][data-tooltip-conf*=right]:before {
+    border-top-color: transparent;
+    border-right-color: $tooltip-border-bg-color;
+    border-bottom-color: transparent;
+    border-left-color: transparent
+  }
+  
+  [data-tooltip][data-tooltip-conf*=inherit][data-tooltip-conf*=bottom]:before {
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-bottom-color: $tooltip-inherit-bg-color;
+    border-left-color: transparent
+  }
+  
+  [data-tooltip][data-tooltip-conf*=inherit][data-tooltip-conf*=left]:before {
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+    border-left-color: $tooltip-inherit-bg-color;
+  }
+
+
+[data-tooltip][data-tooltip=''] {
+  &:after,
+  &:before {
+    display: none
+  }
+}
diff --git a/src/Connected.Components/Styles/globals/_variables.scss b/src/Connected.Components/Styles/globals/_variables.scss
index 9b4b3f8..b999a29 100644
--- a/src/Connected.Components/Styles/globals/_variables.scss
+++ b/src/Connected.Components/Styles/globals/_variables.scss
@@ -20,7 +20,8 @@ $element-fg-core: rgba(255, 255, 255, 0.25); // elements-foreground
 
 
 
-:root {
+:root,
+:root:has(.light:checked)  {
 $blue-50:  #f2f4fd;
 $blue-100: #e5eafa;
 $blue-200: #cbd6f5;
@@ -58,7 +59,8 @@ $blue-900: #191e2e;
 }
 
 
-.pink {
+.pink,
+:root:has(.pink:checked) {
 $violet-50:  #f0eef6;
 $violet-100: #e1dced;
 $violet-200: #c2b9db;
@@ -92,9 +94,43 @@ $violet-900: #212529;
   --accent-color-hover: #fbc5c3;
   }
 
-
-
-.dark {
+  .green,
+  :root:has(.green:checked) {
+  $green-50:  #f8fef4;
+  $green-100: #f0f3e8;
+  $green-200: #ebefe2;
+  $green-300: #e5eadc;
+  $green-400: #e3e9da;
+  $green-500: #dfe6d5;
+  $green-600: #bdcbb0;
+  $green-700: #a1b095;
+  $green-800: #4a613c;
+  $green-900: #25311e;
+  
+    --bg-core-primary: #{$green-600}; // body-background;
+    --bg-core-primary-light: #{$green-100}; // light
+    --bg-core-primary-lighten: #{$green-500}; // lighten
+    --bg-core-primary-darken: #{$green-700}; // darken;
+    --bg-core-primary-dark: #{$green-800}; // dark;
+    --bg-core-start: #{$green-300}; // body-background
+    --bg-core-end: #{$bg-core-end}; // body-background
+  
+    --text-core-hc: #{$text-core-hc}; //title
+    --text-core: #{$green-900}; //text
+    --text-core-lc: #{$text-core-lc}; //metadata
+    --text-core-vc: #{$text-core-vc}; //ikona-text
+  
+    --border-core-lighten:#{$green-300}; //border-lighten
+    --border-core: #{$green-400}; //border
+    --element-bg-core: #{$element-bg-core}; // elements-background
+    --element-fg-core: #{$element-fg-core}; // elements-foreground
+  
+    --accent-color: #dbe971;
+    --accent-color-hover: #cbcc58;
+    }
+
+.dark,
+:root:has(.dark:checked)  {
   --bg-core-primary: hsl(0 0% 10% / 100%); // body-background;
   --bg-core-primary-light: hsl(0 0% 15% / 100%); // light
   --bg-core-primary-lighten: hsl(0 0% 17% / 100%); // lighten
@@ -209,6 +245,7 @@ $base-box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 10%) !default;
 $transition: all 0.15s ease-in-out;
 
 //z-index
+$tooltip-zindex:896;
 $appbar-zindex: 897;
 $sidebar-zindex: 899;
 $sidebar-right-zindex: 898;
diff --git a/src/Connected.Components/Styles/layout/_css_documentation.scss b/src/Connected.Components/Styles/layout/_css_documentation.scss
index d915a29..20cc6a5 100644
--- a/src/Connected.Components/Styles/layout/_css_documentation.scss
+++ b/src/Connected.Components/Styles/layout/_css_documentation.scss
@@ -1,53 +1,33 @@
 @use "../globals" as *;
 
 
-.color-picker-container {
+.color-picker {
   margin-bottom: 1rem;
-}
-
-.color-picker > fieldset {
-  border: 0;
   display: flex;
-  //flex-direction: column;
-  gap: 1.5rem;
-  width: fit-content;
-  //background: #fff;
-  padding: 0.5rem 1.5rem;
-  //position: fixed;
-  //top: 1rem;
-  //right: 0;
-  border-radius: 0 0 1rem 1rem;
-}
-
-.color-picker input[type="radio"] {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  width: 0.75rem;
-  height: 0.75rem;
-  outline: 2px solid var(--radio-color, currentColor);
-  outline-offset: 2px;
-  border-radius: 50%;
-
-  cursor: pointer;
+  gap: 1rem;
 }
 
 .color-picker input[type="radio"]:checked {
   background-color: var(--radio-color);
 }
 
-.color-picker input[type="radio"] {
+.color-picker input[type="radio"].light {
   --radio-color: hsl(225, 68%, 85%);
 }
 
-.color-picker input[type="radio"] {
+.color-picker input[type="radio"].pink {
   --radio-color: rebeccapurple;
 }
 
-.color-picker input[type="radio"] {
+.color-picker input[type="radio"].dark {
   --radio-color: #232323;
 }
 
+
+
+
+
+
 .square > * {
   width: 8.5rem;
   height: 8.5rem;