From 957b92d9c68426b5d814867a2ebd8af807a6b6e7 Mon Sep 17 00:00:00 2001
From: Leonardo-Signorelli <leonardo.signorelliv@gmail.com>
Date: Thu, 28 Mar 2024 17:45:36 +0100
Subject: [PATCH 1/5] kup-calendar : design and token v1

---
 packages/ketchup/src/calendar.html            |  4 +-
 .../components/kup-calendar/kup-calendar.scss | 42 +++++++++----------
 2 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/packages/ketchup/src/calendar.html b/packages/ketchup/src/calendar.html
index 2d55ad9ccf..8aebbf0631 100644
--- a/packages/ketchup/src/calendar.html
+++ b/packages/ketchup/src/calendar.html
@@ -32,9 +32,9 @@
             }
 
             h1 {
-                background-color: var(--kup-primary-color);
+                background-color: var(--kup-gray-color-90);
                 border-radius: 4px;
-                color: var(--kup-text-on-primary-color);
+                color: var(--kup-gray-color-10);
                 line-height: 2em;
                 margin-top: 0;
                 text-align: center;
diff --git a/packages/ketchup/src/components/kup-calendar/kup-calendar.scss b/packages/ketchup/src/components/kup-calendar/kup-calendar.scss
index 5c0bb113e3..045808ce59 100644
--- a/packages/ketchup/src/components/kup-calendar/kup-calendar.scss
+++ b/packages/ketchup/src/components/kup-calendar/kup-calendar.scss
@@ -18,15 +18,15 @@
 :host {
   --kup_calendar_background_color: var(
     --kup-calendar-background-color,
-    var(--kup-background-color)
+    var(--kup-gray-color-10)
   );
   --kup_calendar_border_color: var(
     --kup-calendar-border-color,
-    var(--kup-border-color)
+    var(--kup-gray-color-20)
   );
   --kup_calendar_event_background_color: var(
     --kup-calendar-event-background-color,
-    var(--kup-primary-color)
+    var(--kup-gray-color-30)
   );
   --kup_calendar_event_border_radius: var(
     --kup-calendar-event-border-radius,
@@ -34,7 +34,7 @@
   );
   --kup_calendar_event_color: var(
     --kup-calendar-event-color,
-    var(--kup-text-on-primary-color)
+    var(--kup-gray-color-70)
   );
   --kup_calendar_font_family: var(
     --kup-calendar-font-family,
@@ -43,15 +43,15 @@
   --kup_calendar_font_size: var(--kup-calendar-font-size, var(--kup-font-size));
   --kup_calendar_header_background_color: var(
     --kup-calendar-header-background-color,
-    var(--kup-title-background-color)
+    var(--kup-gray-color-20)
   );
   --kup_calendar_header_color: var(
     --kup-calendar-header-color,
-    var(--kup-title-color)
+    var(--kup-gray-color-70)
   );
   --kup_calendar_navigator_border: var(
     --kup-calendar-navigator-border,
-    2px solid var(--kup-border-color)
+    1px solid var(--kup-gray-color-20)
   );
   --kup_calendar_no_work_day_background_color: var(
     --kup-calendar-no-work-day-background-color,
@@ -59,11 +59,11 @@
   );
   --kup_calendar_no_work_day_color: var(
     --kup-calendar-no-work-day-color,
-    var(--kup-disabled-color)
+    var(--kup-gray-color-30)
   );
   --kup_calendar_today_background_color: var(
     --kup-calendar-today-background-color,
-    rgba(var(--kup-primary-color-rgb), 0.125)
+    var(--kup-gray-color-30)
   );
 
   background-color: var(--kup_calendar_background_color);
@@ -76,27 +76,23 @@
 
 .navigation {
   align-items: center;
-  border-left: var(--kup_calendar_navigator_border);
-  border-right: var(--kup_calendar_navigator_border);
-  border-top: var(--kup_calendar_navigator_border);
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
   display: flex;
   justify-content: space-between;
+  background-color: var(--kup_calendar_background_color);
 
   &__left {
     --kup-font-size: 0.875em;
     display: flex;
+    margin-left: var(--kup-space-03);
   }
 
   &__right {
     display: flex;
+    margin-right: var(--kup-space-03);
   }
 
   &__title {
-    font-size: 1.25em;
-    font-weight: 400;
-    letter-spacing: 0.1892857em;
+    @include kup-heading-02;
     margin: 0px;
     padding: 0px 0.5em;
 
@@ -178,6 +174,7 @@
   .fc-list-day-cushion {
     background: var(--kup_calendar_header_background_color);
     color: var(--kup_calendar_header_color);
+    @include kup-heading-01;
   }
 
   .fc-list-event:hover td {
@@ -188,7 +185,6 @@
   .fc-daygrid-event,
   .fc-timegrid-event {
     background: var(--kup_calendar_event_background_color);
-    border-radius: var(--kup_calendar_event_border_radius);
     border: none;
     border-color: var(--kup_calendar_event_background_color);
     color: var(--kup_calendar_event_color);
@@ -217,18 +213,18 @@
   .navigation {
     flex-direction: column;
   }
-  .calendar{
+  .calendar {
     height: 100%;
-    .fc-view-harness{
+    .fc-view-harness {
       min-height: 450px;
     }
   }
-  
-  .navigation .navigation__left{
+
+  .navigation .navigation__left {
     font-size: 20px;
     gap: 8px;
   }
-  .navigation .navigation__right .f-chip .chip-set .chip-set__item{
+  .navigation .navigation__right .f-chip .chip-set .chip-set__item {
     font-size: 16px;
   }
 }

From d0a02a8dc0aba35f799105417b3a46c66a61106b Mon Sep 17 00:00:00 2001
From: Leonardo-Signorelli <leonardo.signorelliv@gmail.com>
Date: Tue, 2 Apr 2024 18:00:14 +0200
Subject: [PATCH 2/5] Redesign specs

---
 packages/ketchup-showcase/public/showcase.css |   2 +-
 packages/ketchup/src/assets/image-list.js     |   5 +
 packages/ketchup/src/components.d.ts          |  41 +++
 .../kup-box/styles/kup-box-main.scss          |   2 +-
 .../built-in/kup-card-built-in-1.scss         |   2 +-
 .../src/components/kup-dialog/kup-dialog.scss |   5 +-
 .../styles/kup-dropdown-button-classes.scss   |   8 +-
 .../styles/kup-dropdown-button-main.scss      |   8 +-
 .../kup-image-list/kup-image-list.tsx         |   2 +-
 .../src/components/kup-image-list/readme.md   | 107 ++++---
 .../styles/kup-image-list-main.scss           |   2 +-
 .../src/components/kup-input-panel/readme.md  | 265 ++++++++++++++++++
 .../kup-planner/utils/gantt-table.module.scss |   4 +-
 .../utils/kup-gantt/kup-gantt.scss            |   2 +-
 .../utils/kup-switcher/kup-switcher.scss      |   2 +-
 .../utils/kup-task-list/kup-task-list.scss    |   2 +-
 .../src/f-components/f-button/f-button.scss   |   7 +-
 .../src/f-components/f-chip/f-chip.scss       |   2 +-
 .../f-progress-bar/f-progress-bar.scss        |   2 +-
 .../src/f-components/f-switch/f-switch.scss   |   8 +-
 .../kup-theme/kup-theme-application.scss      |   7 +
 .../src/managers/kup-theme/themes.json        |  13 +-
 22 files changed, 422 insertions(+), 76 deletions(-)
 create mode 100644 packages/ketchup/src/components/kup-input-panel/readme.md

diff --git a/packages/ketchup-showcase/public/showcase.css b/packages/ketchup-showcase/public/showcase.css
index 923abe3954..2173efd8c6 100644
--- a/packages/ketchup-showcase/public/showcase.css
+++ b/packages/ketchup-showcase/public/showcase.css
@@ -39,7 +39,7 @@
 
 code.flat {
   background: var(--kup-gray-color-10);
-  border-radius: var(--kup-radius-00);
+  border-radius: var(--kup-radius-01);
   border: 1px solid var(--kup-gray-color-30);
   color: var(--kup-gray-color-90);
   display: flex;
diff --git a/packages/ketchup/src/assets/image-list.js b/packages/ketchup/src/assets/image-list.js
index 573fbaa895..1f6b92cceb 100644
--- a/packages/ketchup/src/assets/image-list.js
+++ b/packages/ketchup/src/assets/image-list.js
@@ -583,6 +583,11 @@ const data = [
         isExpanded: false,
         value: 'Framework',
         visible: true,
+        badgeData: [
+            {
+                text: '2',
+            },
+        ],
     },
     {
         children: [
diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts
index 1764a8e729..84b3d7706a 100644
--- a/packages/ketchup/src/components.d.ts
+++ b/packages/ketchup/src/components.d.ts
@@ -2545,6 +2545,47 @@ export namespace Components {
         "stateId": string;
         "store": KupStore;
     }
+<<<<<<< Updated upstream
+=======
+    interface KupInputPanel {
+        /**
+          * Custom style of the component.
+          * @default ""
+          * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+         */
+        "customStyle": string;
+        /**
+          * Actual data of the form.
+          * @default null
+         */
+        "data": KupInputPanelData;
+        /**
+          * Used to retrieve component's props values.
+          * @param descriptions - When provided and true, the result will be the list of props with their description.
+          * @returns List of props as object, each key will be a prop.
+         */
+        "getProps": (descriptions?: boolean) => Promise<GenericObject>;
+        /**
+          * Creates a hidden submit button in order to submit the form with enter.
+          * @default false
+         */
+        "hiddenSubmitButton": boolean;
+        /**
+          * This method is used to trigger a new render of the component.
+         */
+        "refresh": () => Promise<void>;
+        /**
+          * Sets the props to the component.
+          * @param props - Object containing props that will be set to the component.
+         */
+        "setProps": (props: GenericObject) => Promise<void>;
+        /**
+          * Sets the callback function on submit form
+          * @default null
+         */
+        "submitCb": (e: SubmitEvent) => unknown;
+    }
+>>>>>>> Stashed changes
     interface KupLazy {
         /**
           * Sets the tag name of the component to be lazy loaded.
diff --git a/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss b/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss
index 1649389239..45f14326c6 100644
--- a/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss
+++ b/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss
@@ -61,7 +61,7 @@
 
     .box {
       background-color: var(--kup_box_background_color);
-      border-radius: var(--kup-radius-00);
+      border-radius: var(--kup-radius-01);
       flex-grow: 1;
       cursor: pointer;
       position: relative;
diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss
index d64ee70d6f..977e82968f 100644
--- a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss
+++ b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss
@@ -17,7 +17,7 @@
     0px 3px 6px 0 rgba(0, 0, 0, 0.3)
   );
   background-color: var(--kup_card_background_color);
-  border-radius: var(--kup-radius-00);
+  border-radius: var(--kup-radius-01);
   box-sizing: border-box;
   box-shadow: 0 2px 1px -1px rgba(128, 128, 128, 0.1),
     0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);
diff --git a/packages/ketchup/src/components/kup-dialog/kup-dialog.scss b/packages/ketchup/src/components/kup-dialog/kup-dialog.scss
index 2e18886f60..a9a99774ac 100644
--- a/packages/ketchup/src/components/kup-dialog/kup-dialog.scss
+++ b/packages/ketchup/src/components/kup-dialog/kup-dialog.scss
@@ -7,10 +7,7 @@
     --kup-dialogheader-text-color,
     var(--kup-gray-color-70)
   );
-  --kup_dialog_background_color: var(
-    --kup-header-text-color,
-    var(--kup-gray-color-0)
-  );
+  --kup_dialog_background_color: var(--kup-layer-0, var(--kup-gray-color-0));
   --kup_dialog_header_height: var(--kup-dialog-header-height, 2em);
 
   box-sizing: border-box;
diff --git a/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-classes.scss b/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-classes.scss
index 6d8161c577..e700015437 100644
--- a/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-classes.scss
+++ b/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-classes.scss
@@ -5,15 +5,15 @@
 :host(.#{$kup-class-shaped}) {
   .dropdown-button__primary-action {
     .button {
-      border-top-left-radius: var(--kup-radius-00);
-      border-bottom-left-radius: var(--kup-radius-00);
+      border-top-left-radius: var(--kup-radius-01);
+      border-bottom-left-radius: var(--kup-radius-01);
     }
   }
 
   .dropdown-button__dropdown-action {
     .button {
-      border-top-right-radius: var(--kup-radius-00);
-      border-bottom-right-radius: var(--kup-radius-00);
+      border-top-right-radius: var(--kup-radius-01);
+      border-bottom-right-radius: var(--kup-radius-01);
     }
   }
 }
diff --git a/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-main.scss b/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-main.scss
index 85c816a53f..c5877e1a04 100644
--- a/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-main.scss
+++ b/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-main.scss
@@ -26,15 +26,15 @@
 
 .f-button.dropdown-button__dropdown-action.dropdown-only {
   .button {
-    border-top-left-radius: var(--kup-radius-00);
-    border-bottom-left-radius: var(--kup-radius-00);
+    border-top-left-radius: var(--kup-radius-01);
+    border-bottom-left-radius: var(--kup-radius-01);
   }
 }
 
 .f-button.dropdown-button__dropdown-action {
   .button {
-    border-top-left-radius: var(--kup-radius-00);
-    border-bottom-left-radius: var(--kup-radius-00);
+    border-top-left-radius: var(--kup-radius-01);
+    border-bottom-left-radius: var(--kup-radius-01);
     box-shadow: var(--kup-primary-color) -2px 0px 2px -2px;
 
     .button__icon {
diff --git a/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx b/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx
index 6ddec63164..de83fbda40 100644
--- a/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx
+++ b/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx
@@ -121,7 +121,7 @@ export class KupImageList {
      * When enabled displays Material's ripple effect on clicked items.
      * @default true
      */
-    @Prop() ripple: boolean = true;
+    @Prop() ripple: boolean = false;
     /**
      * Number of rows to display in the grid layout.
      * @default null
diff --git a/packages/ketchup/src/components/kup-image-list/readme.md b/packages/ketchup/src/components/kup-image-list/readme.md
index 7c05d60e8a..c6040ad29e 100644
--- a/packages/ketchup/src/components/kup-image-list/readme.md
+++ b/packages/ketchup/src/components/kup-image-list/readme.md
@@ -2,8 +2,10 @@
 
 <!-- Auto Generated Below -->
 
+
 ## Properties
 
+<<<<<<< Updated upstream
 | Property | Attribute | Description | Type | Default |
 | --- | --- | --- | --- | --- |
 | `columns` | `columns` | Number of columns to display in the grid layout. | `number` | `null` |
@@ -14,14 +16,28 @@
 | `selectedNode` | -- | An array of integers containing the path to a selected child.\  | `number[]` | `[]` |
 | `stateId` | `state-id` |  | `string` | `''` |
 | `store` | -- |  | `KupStore` | `undefined` |
+=======
+| Property       | Attribute      | Description                                                      | Type                     | Default     |
+| -------------- | -------------- | ---------------------------------------------------------------- | ------------------------ | ----------- |
+| `columns`      | `columns`      | Number of columns to display in the grid layout.                 | `number`                 | `null`      |
+| `customStyle`  | `custom-style` | Custom style of the component.                                   | `string`                 | `''`        |
+| `data`         | --             | Actual data of the component.                                    | `KupImageListDataNode[]` | `[]`        |
+| `ripple`       | `ripple`       | When enabled displays Material's ripple effect on clicked items. | `boolean`                | `true`      |
+| `rows`         | `rows`         | Number of rows to display in the grid layout.                    | `number`                 | `null`      |
+| `selectedNode` | --             | An array of integers containing the path to a selected child.\   | `number[]`               | `[]`        |
+| `stateId`      | `state-id`     |                                                                  | `string`                 | `''`        |
+| `store`        | --             |                                                                  | `KupStore`               | `undefined` |
+
+>>>>>>> Stashed changes
 
 ## Events
 
-| Event | Description | Type |
-| --- | --- | --- |
-| `kup-imagelist-click` |  | `CustomEvent<KupImageListEventPayload>` |
-| `kup-imagelist-contextmenu` |  | `CustomEvent<KupImageListEventPayload>` |
-| `kup-imagelist-dblclick` |  | `CustomEvent<KupImageListEventPayload>` |
+| Event                       | Description | Type                                    |
+| --------------------------- | ----------- | --------------------------------------- |
+| `kup-imagelist-click`       |             | `CustomEvent<KupImageListEventPayload>` |
+| `kup-imagelist-contextmenu` |             | `CustomEvent<KupImageListEventPayload>` |
+| `kup-imagelist-dblclick`    |             | `CustomEvent<KupImageListEventPayload>` |
+
 
 ## Methods
 
@@ -31,8 +47,8 @@ Used to retrieve component's props values.
 
 #### Parameters
 
-| Name | Type | Description |
-| --- | --- | --- |
+| Name           | Type      | Description                                                                            |
+| -------------- | --------- | -------------------------------------------------------------------------------------- |
 | `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. |
 
 #### Returns
@@ -49,61 +65,66 @@ This method is used to trigger a new render of the component.
 
 Type: `Promise<void>`
 
+
+
 ### `setProps(props: GenericObject) => Promise<void>`
 
 Sets the props to the component.
 
 #### Parameters
 
-| Name | Type | Description |
-| --- | --- | --- |
+| Name    | Type            | Description                                                  |
+| ------- | --------------- | ------------------------------------------------------------ |
 | `props` | `GenericObject` | - Object containing props that will be set to the component. |
 
 #### Returns
 
 Type: `Promise<void>`
 
+
+
+
 ## CSS Custom Properties
 
-| Name | Description |
-| --- | --- |
-| `--kup-imagelist-background-color` | Sets the background color of the component. |
-| `--kup-imagelist-columns` | Sets the number of columns of the grid. |
-| `--kup-imagelist-grid-gap` | Sets the gap of the grid. |
-| `--kup-imagelist-image-margin` | Sets the margin of the images. |
-| `--kup-imagelist-image-min-height` | Sets the minimun height of the images (useful for icons). |
-| `--kup-imagelist-item-border-radius` | Sets the border radius of items. |
-| `--kup-imagelist-item-height` | Sets the height of an item. |
-| `--kup-imagelist-item-padding` | Sets the padding of an item. |
-| `--kup-imagelist-item-width` | Sets the width of an item. |
-| `--kup-imagelist-label-margin` | Sets the margin of the labels. |
-| `--kup-imagelist-primary-color` | Sets the primary color of the component (ripple effect). |
-| `--kup-imagelist-primary-color-rgb` | Sets the RGB values of the primary color. |
-| `--kup-imagelist-text-color` | Sets the text color of the labels. |
+| Name                                 | Description                                               |
+| ------------------------------------ | --------------------------------------------------------- |
+| `--kup-imagelist-background-color`   | Sets the background color of the component.               |
+| `--kup-imagelist-columns`            | Sets the number of columns of the grid.                   |
+| `--kup-imagelist-grid-gap`           | Sets the gap of the grid.                                 |
+| `--kup-imagelist-image-margin`       | Sets the margin of the images.                            |
+| `--kup-imagelist-image-min-height`   | Sets the minimun height of the images (useful for icons). |
+| `--kup-imagelist-item-border-radius` | Sets the border radius of items.                          |
+| `--kup-imagelist-item-height`        | Sets the height of an item.                               |
+| `--kup-imagelist-item-padding`       | Sets the padding of an item.                              |
+| `--kup-imagelist-item-width`         | Sets the width of an item.                                |
+| `--kup-imagelist-label-margin`       | Sets the margin of the labels.                            |
+| `--kup-imagelist-primary-color`      | Sets the primary color of the component (ripple effect).  |
+| `--kup-imagelist-primary-color-rgb`  | Sets the RGB values of the primary color.                 |
+| `--kup-imagelist-text-color`         | Sets the text color of the labels.                        |
+
 
 ## Dependencies
 
 ### Depends on
 
--   [kup-card](../kup-card)
--   [kup-dialog](../kup-dialog)
--   [kup-badge](../kup-badge)
--   [kup-autocomplete](../kup-autocomplete)
--   [kup-chip](../kup-chip)
--   [kup-text-field](../kup-text-field)
--   [kup-color-picker](../kup-color-picker)
--   [kup-combobox](../kup-combobox)
--   [kup-date-picker](../kup-date-picker)
--   [kup-rating](../kup-rating)
--   [kup-time-picker](../kup-time-picker)
--   [kup-image](../kup-image)
--   [kup-button-list](../kup-button-list)
--   [kup-chart](../kup-chart)
--   [kup-gauge](../kup-gauge)
--   [kup-progress-bar](../kup-progress-bar)
+- [kup-card](../kup-card)
+- [kup-dialog](../kup-dialog)
+- [kup-badge](../kup-badge)
+- [kup-autocomplete](../kup-autocomplete)
+- [kup-chip](../kup-chip)
+- [kup-text-field](../kup-text-field)
+- [kup-color-picker](../kup-color-picker)
+- [kup-combobox](../kup-combobox)
+- [kup-date-picker](../kup-date-picker)
+- [kup-rating](../kup-rating)
+- [kup-time-picker](../kup-time-picker)
+- [kup-image](../kup-image)
+- [kup-button-list](../kup-button-list)
+- [kup-chart](../kup-chart)
+- [kup-gauge](../kup-gauge)
+- [kup-progress-bar](../kup-progress-bar)
 
 ### Graph
-
 ```mermaid
 graph TD;
   kup-image-list --> kup-card
@@ -275,6 +296,6 @@ graph TD;
   style kup-image-list fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
----
+----------------------------------------------
 
-_Built with [StencilJS](https://stenciljs.com/)_
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss b/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss
index a4eac0b801..8f5d0eb3bd 100644
--- a/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss
+++ b/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss
@@ -27,7 +27,7 @@
   );
   --kup_imagelist_item_border_radius: var(
     --kup-imagelist-item-border-radius,
-    var(--kup-radius-00)
+    var(--kup-radius-01)
   );
   --kup_imagelist_item_height: var(--kup-imagelist-item-height, auto);
   --kup_imagelist_item_padding: var(--kup-imagelist-item-padding, 0);
diff --git a/packages/ketchup/src/components/kup-input-panel/readme.md b/packages/ketchup/src/components/kup-input-panel/readme.md
new file mode 100644
index 0000000000..146b523e6f
--- /dev/null
+++ b/packages/ketchup/src/components/kup-input-panel/readme.md
@@ -0,0 +1,265 @@
+# kup-input-panel
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property             | Attribute              | Description                                                            | Type                          | Default |
+| -------------------- | ---------------------- | ---------------------------------------------------------------------- | ----------------------------- | ------- |
+| `customStyle`        | `custom-style`         | Custom style of the component.                                         | `string`                      | `''`    |
+| `data`               | --                     | Actual data of the form.                                               | `KupInputPanelData`           | `null`  |
+| `hiddenSubmitButton` | `hidden-submit-button` | Creates a hidden submit button in order to submit the form with enter. | `boolean`                     | `false` |
+| `submitCb`           | --                     | Sets the callback function on submit form                              | `(e: SubmitEvent) => unknown` | `null`  |
+
+
+## Events
+
+| Event                   | Description                     | Type                           |
+| ----------------------- | ------------------------------- | ------------------------------ |
+| `kup-input-panel-ready` | When component load is complete | `CustomEvent<KupEventPayload>` |
+
+
+## Methods
+
+### `getProps(descriptions?: boolean) => Promise<GenericObject>`
+
+Used to retrieve component's props values.
+
+#### Parameters
+
+| Name           | Type      | Description                                                                            |
+| -------------- | --------- | -------------------------------------------------------------------------------------- |
+| `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. |
+
+#### Returns
+
+Type: `Promise<GenericObject>`
+
+List of props as object, each key will be a prop.
+
+### `refresh() => Promise<void>`
+
+This method is used to trigger a new render of the component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+### `setProps(props: GenericObject) => Promise<void>`
+
+Sets the props to the component.
+
+#### Parameters
+
+| Name    | Type            | Description                                                  |
+| ------- | --------------- | ------------------------------------------------------------ |
+| `props` | `GenericObject` | - Object containing props that will be set to the component. |
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
+## Dependencies
+
+### Depends on
+
+- [kup-card](../kup-card)
+- [kup-dialog](../kup-dialog)
+- [kup-badge](../kup-badge)
+- [kup-autocomplete](../kup-autocomplete)
+- [kup-chip](../kup-chip)
+- [kup-text-field](../kup-text-field)
+- [kup-color-picker](../kup-color-picker)
+- [kup-combobox](../kup-combobox)
+- [kup-date-picker](../kup-date-picker)
+- [kup-rating](../kup-rating)
+- [kup-time-picker](../kup-time-picker)
+- [kup-image](../kup-image)
+- [kup-button-list](../kup-button-list)
+- [kup-chart](../kup-chart)
+- [kup-gauge](../kup-gauge)
+- [kup-progress-bar](../kup-progress-bar)
+
+### Graph
+```mermaid
+graph TD;
+  kup-input-panel --> kup-card
+  kup-input-panel --> kup-dialog
+  kup-input-panel --> kup-badge
+  kup-input-panel --> kup-autocomplete
+  kup-input-panel --> kup-chip
+  kup-input-panel --> kup-text-field
+  kup-input-panel --> kup-color-picker
+  kup-input-panel --> kup-combobox
+  kup-input-panel --> kup-date-picker
+  kup-input-panel --> kup-rating
+  kup-input-panel --> kup-time-picker
+  kup-input-panel --> kup-image
+  kup-input-panel --> kup-button-list
+  kup-input-panel --> kup-chart
+  kup-input-panel --> kup-gauge
+  kup-input-panel --> kup-progress-bar
+  kup-card --> kup-autocomplete
+  kup-card --> kup-chip
+  kup-card --> kup-text-field
+  kup-card --> kup-color-picker
+  kup-card --> kup-combobox
+  kup-card --> kup-date-picker
+  kup-card --> kup-rating
+  kup-card --> kup-time-picker
+  kup-card --> kup-image
+  kup-card --> kup-button-list
+  kup-card --> kup-chart
+  kup-card --> kup-gauge
+  kup-card --> kup-progress-bar
+  kup-card --> kup-badge
+  kup-card --> kup-button
+  kup-card --> kup-list
+  kup-card --> kup-spinner
+  kup-card --> kup-checkbox
+  kup-card --> kup-data-table
+  kup-card --> kup-tab-bar
+  kup-card --> kup-tree
+  kup-card --> kup-switch
+  kup-card --> kup-dropdown-button
+  kup-card --> kup-card
+  kup-card --> kup-dialog
+  kup-autocomplete --> kup-list
+  kup-autocomplete --> kup-card
+  kup-autocomplete --> kup-dialog
+  kup-autocomplete --> kup-badge
+  kup-list --> kup-list
+  kup-list --> kup-radio
+  kup-list --> kup-card
+  kup-list --> kup-dialog
+  kup-list --> kup-badge
+  kup-radio --> kup-card
+  kup-radio --> kup-dialog
+  kup-dialog --> kup-badge
+  kup-dialog --> kup-card
+  kup-dialog --> kup-dialog
+  kup-badge --> kup-badge
+  kup-badge --> kup-card
+  kup-badge --> kup-dialog
+  kup-chip --> kup-card
+  kup-chip --> kup-dialog
+  kup-chip --> kup-badge
+  kup-text-field --> kup-card
+  kup-text-field --> kup-dialog
+  kup-text-field --> kup-badge
+  kup-color-picker --> kup-card
+  kup-color-picker --> kup-dialog
+  kup-color-picker --> kup-badge
+  kup-combobox --> kup-list
+  kup-combobox --> kup-card
+  kup-combobox --> kup-dialog
+  kup-combobox --> kup-badge
+  kup-date-picker --> kup-card
+  kup-date-picker --> kup-dialog
+  kup-date-picker --> kup-badge
+  kup-rating --> kup-card
+  kup-rating --> kup-dialog
+  kup-time-picker --> kup-card
+  kup-time-picker --> kup-list
+  kup-time-picker --> kup-dialog
+  kup-time-picker --> kup-badge
+  kup-image --> kup-spinner
+  kup-image --> kup-card
+  kup-image --> kup-dialog
+  kup-image --> kup-badge
+  kup-spinner --> kup-card
+  kup-spinner --> kup-dialog
+  kup-button-list --> kup-dropdown-button
+  kup-button-list --> kup-card
+  kup-button-list --> kup-dialog
+  kup-button-list --> kup-badge
+  kup-dropdown-button --> kup-list
+  kup-dropdown-button --> kup-card
+  kup-dropdown-button --> kup-dialog
+  kup-dropdown-button --> kup-badge
+  kup-chart --> kup-card
+  kup-chart --> kup-dialog
+  kup-gauge --> kup-card
+  kup-gauge --> kup-dialog
+  kup-progress-bar --> kup-card
+  kup-progress-bar --> kup-dialog
+  kup-button --> kup-card
+  kup-button --> kup-dialog
+  kup-button --> kup-badge
+  kup-checkbox --> kup-card
+  kup-checkbox --> kup-dialog
+  kup-checkbox --> kup-badge
+  kup-data-table --> kup-card
+  kup-data-table --> kup-list
+  kup-data-table --> kup-switch
+  kup-data-table --> kup-button
+  kup-data-table --> kup-spinner
+  kup-data-table --> kup-form
+  kup-data-table --> kup-image
+  kup-data-table --> kup-dialog
+  kup-data-table --> kup-checkbox
+  kup-data-table --> kup-combobox
+  kup-data-table --> kup-badge
+  kup-data-table --> kup-autocomplete
+  kup-data-table --> kup-chip
+  kup-data-table --> kup-text-field
+  kup-data-table --> kup-color-picker
+  kup-data-table --> kup-date-picker
+  kup-data-table --> kup-rating
+  kup-data-table --> kup-time-picker
+  kup-data-table --> kup-button-list
+  kup-data-table --> kup-chart
+  kup-data-table --> kup-gauge
+  kup-data-table --> kup-progress-bar
+  kup-switch --> kup-card
+  kup-switch --> kup-dialog
+  kup-form --> kup-card
+  kup-form --> kup-dialog
+  kup-form --> kup-autocomplete
+  kup-form --> kup-chip
+  kup-form --> kup-text-field
+  kup-form --> kup-color-picker
+  kup-form --> kup-combobox
+  kup-form --> kup-date-picker
+  kup-form --> kup-rating
+  kup-form --> kup-time-picker
+  kup-form --> kup-image
+  kup-form --> kup-button-list
+  kup-form --> kup-chart
+  kup-form --> kup-gauge
+  kup-form --> kup-progress-bar
+  kup-form --> kup-badge
+  kup-tab-bar --> kup-card
+  kup-tab-bar --> kup-dialog
+  kup-tab-bar --> kup-badge
+  kup-tree --> kup-card
+  kup-tree --> kup-list
+  kup-tree --> kup-text-field
+  kup-tree --> kup-dialog
+  kup-tree --> kup-autocomplete
+  kup-tree --> kup-chip
+  kup-tree --> kup-color-picker
+  kup-tree --> kup-combobox
+  kup-tree --> kup-date-picker
+  kup-tree --> kup-rating
+  kup-tree --> kup-time-picker
+  kup-tree --> kup-image
+  kup-tree --> kup-button-list
+  kup-tree --> kup-chart
+  kup-tree --> kup-gauge
+  kup-tree --> kup-progress-bar
+  kup-tree --> kup-badge
+  style kup-input-panel fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss b/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss
index f34ee5eb20..9aad09070a 100644
--- a/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss
+++ b/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss
@@ -5,7 +5,7 @@
 .project {
   background: var(--kup-gray-color-10);
   border-bottom: 1px solid var(--kup-gray-color-20);
-  border-radius: var(--kup-radius-00);
+  border-radius: var(--kup-radius-01);
   box-sizing: border-box;
   color: var(--kup-text-color, #595959);
   cursor: pointer;
@@ -70,7 +70,7 @@
   cursor: pointer;
   display: grid;
   border-bottom: 1px solid var(--kup-gray-color-20);
-  border-radius: var(--kup-radius-00);
+  border-radius: var(--kup-radius-01);
   grid-template-columns: var(--grid-fasi-columns, 1fr 1fr 1fr);
   place-items: center;
   background-color: var(--kup-gray-color-10);
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.scss b/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.scss
index dade94b983..70b5131405 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.scss
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.scss
@@ -9,7 +9,7 @@
 
 .ganttContainer {
   background: var(--kup-gray-color-20);
-  border-radius: var(--kup-radius-00);
+  border-radius: var(--kup-radius-01);
   overflow: hidden;
   padding: var(--kup-space-05);
 }
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.scss b/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.scss
index ef1437161b..4ebe304b86 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.scss
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.scss
@@ -11,7 +11,7 @@
   border: none;
   text-align: left;
   box-sizing: border-box;
-  color: var(--kup-gray-color-0);
+  color: var(--kup-layer-0);
   cursor: pointer;
   padding: var(--kup-space-03) var(--kup-space-05);
   &:hover {
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-task-list/kup-task-list.scss b/packages/ketchup/src/components/kup-planner/utils/kup-task-list/kup-task-list.scss
index bba02947fb..cec6699b74 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-task-list/kup-task-list.scss
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-task-list/kup-task-list.scss
@@ -1,6 +1,6 @@
 .tasks {
   background: var(--kup-gray-color-20);
-  border-radius: var(--kup-radius-00);
+  border-radius: var(--kup-radius-01);
   padding: var(--kup-space-05);
   margin-right: var(--kup-space-05);
 }
diff --git a/packages/ketchup/src/f-components/f-button/f-button.scss b/packages/ketchup/src/f-components/f-button/f-button.scss
index 9cc7f45e9f..a48659ba96 100644
--- a/packages/ketchup/src/f-components/f-button/f-button.scss
+++ b/packages/ketchup/src/f-components/f-button/f-button.scss
@@ -49,7 +49,7 @@
   );
   --kup_button_border_radius: var(
     --kup-button-border-radius,
-    var(--kup-radius-00)
+    var(--kup-radius-01)
   );
   --kup_button_font_family: var(
     --kup-button-font-family,
@@ -323,7 +323,10 @@
 
     &:hover,
     &:focus {
-      background-color: rgba(var(--kup_button_text_color_rgb), 0.125);
+      background-color: var(--kup-primary-color-60);
+      .icon-button__icon .f-image__icon {
+        background: var(--kup-primary-color-0) !important;
+      }
     }
 
     .icon-button__icon {
diff --git a/packages/ketchup/src/f-components/f-chip/f-chip.scss b/packages/ketchup/src/f-components/f-chip/f-chip.scss
index 812291d5b4..0cbac42569 100644
--- a/packages/ketchup/src/f-components/f-chip/f-chip.scss
+++ b/packages/ketchup/src/f-components/f-chip/f-chip.scss
@@ -1,7 +1,7 @@
 .f-chip {
   --kup_chip_background_color: var(
     --kup-chip-background-color,
-    var(--kup-gray-color-20)
+    var(--kup-gray-color-30)
   );
   --kup_chip_border_color: var(
     --kup-chip-border-color,
diff --git a/packages/ketchup/src/f-components/f-progress-bar/f-progress-bar.scss b/packages/ketchup/src/f-components/f-progress-bar/f-progress-bar.scss
index 054e8ab14d..fad52bde4c 100644
--- a/packages/ketchup/src/f-components/f-progress-bar/f-progress-bar.scss
+++ b/packages/ketchup/src/f-components/f-progress-bar/f-progress-bar.scss
@@ -1,7 +1,7 @@
 .f-progress-bar {
   --kup_progressbar_border_radius: var(
     --kup-progressbar-border-radius,
-    var(--kup-radius-00)
+    var(--kup-radius-01)
   );
   --kup_progressbar_font_family: var(
     --kup-progressbar-font-family,
diff --git a/packages/ketchup/src/f-components/f-switch/f-switch.scss b/packages/ketchup/src/f-components/f-switch/f-switch.scss
index 79100202d5..4683da4c41 100644
--- a/packages/ketchup/src/f-components/f-switch/f-switch.scss
+++ b/packages/ketchup/src/f-components/f-switch/f-switch.scss
@@ -150,7 +150,7 @@
 
       &.switch--checked {
         .switch__track {
-          background-color: var(--kup-success-color);
+          background-color: var(--kup-success-color-60);
         }
         .switch__thumb-underlay {
           transform: translateX(23px);
@@ -158,7 +158,7 @@
 
         .switch__thumb {
           background-color: var(--kup_switch_thumb_background_color);
-          border-color: var(--kup-success-color);
+          border-color: var(--kup-success-color-60);
 
           .switch__native-control {
             transform: translateX(-16px);
@@ -204,8 +204,8 @@
   }
 
   &.#{$kup-class-success} {
-    --kup-switch-primary-color: var(--kup-success-color);
-    --kup-switch-primary-color-rgb: var(--kup-success-color-rgb);
+    --kup-switch-primary-color: var(--kup-success-color-60);
+    --kup-switch-primary-color-rgb: var(--kup-success-color-60-rgb);
   }
 
   &.#{$kup-class-warning} {
diff --git a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss
index bbf6197efd..6b15bedae6 100644
--- a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss
+++ b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss
@@ -1,3 +1,10 @@
+:root {
+  --kup-layer-0: var(--kup-gray-color-0);
+  --kup-layer-1: var(--kup-gray-color-10);
+  --kup-layer-2: var(--kup-gray-color-20);
+  --kup-layer-3: var(--kup-gray-color-30);
+}
+
 /*-------------------------------------------------*/
 /*                   E d i t o r                   */
 /*-------------------------------------------------*/
diff --git a/packages/ketchup/src/managers/kup-theme/themes.json b/packages/ketchup/src/managers/kup-theme/themes.json
index 2b396bddfd..5ff7d48bb9 100644
--- a/packages/ketchup/src/managers/kup-theme/themes.json
+++ b/packages/ketchup/src/managers/kup-theme/themes.json
@@ -79,6 +79,7 @@
             "--kup-space-12": "96px",
             "--kup-space-13": "160px",
             "--kup-radius-00": "0px",
+            "--kup-radius-01": "2px",
             "--kup-radius-100": "100px"
         },
         "icons": {
@@ -151,7 +152,8 @@
             "--kup-border-color": "#d8d8d8",
             "--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
             "--kup-info-color": "#2592df",
-            "--kup-success-color": "#24A148",
+            "--kup-success-color-40": "#42be65",
+            "--kup-success-color-60": "#198038",
             "--kup-rating-color": "#ffa000",
             "--kup-warning-color": "#de8906",
             "--kup-danger-color": "#a6192e",
@@ -179,6 +181,7 @@
             "--kup-space-12": "96px",
             "--kup-space-13": "160px",
             "--kup-radius-00": "0px",
+            "--kup-radius-01": "2px",
             "--kup-radius-100": "100px"
         },
         "icons": {
@@ -251,7 +254,8 @@
             "--kup-border-color": "#d8d8d8",
             "--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
             "--kup-info-color": "#2592df",
-            "--kup-success-color": "#42BE65",
+            "--kup-success-color-60": "#42be65",
+            "--kup-success-color-40": "#198038",
             "--kup-rating-color": "#ffa000",
             "--kup-warning-color": "#de8906",
             "--kup-danger-color": "#a6192e",
@@ -279,6 +283,7 @@
             "--kup-space-12": "96px",
             "--kup-space-13": "160px",
             "--kup-radius-00": "0px",
+            "--kup-radius-01": "2px",
             "--kup-radius-100": "100px"
         },
         "icons": {
@@ -351,7 +356,8 @@
             "--kup-border-color": "#d8d8d8",
             "--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
             "--kup-info-color": "#2592df",
-            "--kup-success-color": "#42BE65",
+            "--kup-success-color-60": "#42be65",
+            "--kup-success-color-40": "#198038",
             "--kup-rating-color": "#ffa000",
             "--kup-warning-color": "#de8906",
             "--kup-danger-color": "#da1e28",
@@ -379,6 +385,7 @@
             "--kup-space-12": "96px",
             "--kup-space-13": "160px",
             "--kup-radius-00": "0px",
+            "--kup-radius-01": "2px",
             "--kup-radius-100": "100px"
         },
         "icons": {

From 6cf45b035dd604f75ae3f6b3ea98ae95d0df1923 Mon Sep 17 00:00:00 2001
From: Leonardo-Signorelli <leonardo.signorelliv@gmail.com>
Date: Tue, 2 Apr 2024 18:01:58 +0200
Subject: [PATCH 3/5] Redesign specs fix

---
 packages/ketchup/src/components.d.ts          |  41 -------
 .../src/components/kup-image-list/readme.md   | 109 +++++++-----------
 2 files changed, 44 insertions(+), 106 deletions(-)

diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts
index 84b3d7706a..1764a8e729 100644
--- a/packages/ketchup/src/components.d.ts
+++ b/packages/ketchup/src/components.d.ts
@@ -2545,47 +2545,6 @@ export namespace Components {
         "stateId": string;
         "store": KupStore;
     }
-<<<<<<< Updated upstream
-=======
-    interface KupInputPanel {
-        /**
-          * Custom style of the component.
-          * @default ""
-          * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-         */
-        "customStyle": string;
-        /**
-          * Actual data of the form.
-          * @default null
-         */
-        "data": KupInputPanelData;
-        /**
-          * Used to retrieve component's props values.
-          * @param descriptions - When provided and true, the result will be the list of props with their description.
-          * @returns List of props as object, each key will be a prop.
-         */
-        "getProps": (descriptions?: boolean) => Promise<GenericObject>;
-        /**
-          * Creates a hidden submit button in order to submit the form with enter.
-          * @default false
-         */
-        "hiddenSubmitButton": boolean;
-        /**
-          * This method is used to trigger a new render of the component.
-         */
-        "refresh": () => Promise<void>;
-        /**
-          * Sets the props to the component.
-          * @param props - Object containing props that will be set to the component.
-         */
-        "setProps": (props: GenericObject) => Promise<void>;
-        /**
-          * Sets the callback function on submit form
-          * @default null
-         */
-        "submitCb": (e: SubmitEvent) => unknown;
-    }
->>>>>>> Stashed changes
     interface KupLazy {
         /**
           * Sets the tag name of the component to be lazy loaded.
diff --git a/packages/ketchup/src/components/kup-image-list/readme.md b/packages/ketchup/src/components/kup-image-list/readme.md
index c6040ad29e..ce810b3854 100644
--- a/packages/ketchup/src/components/kup-image-list/readme.md
+++ b/packages/ketchup/src/components/kup-image-list/readme.md
@@ -2,42 +2,26 @@
 
 <!-- Auto Generated Below -->
 
-
 ## Properties
 
-<<<<<<< Updated upstream
 | Property | Attribute | Description | Type | Default |
 | --- | --- | --- | --- | --- |
 | `columns` | `columns` | Number of columns to display in the grid layout. | `number` | `null` |
 | `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` |
-| `data` | -- | Actual data of the component. | `KupDataNode[]` | `[]` |
+| `data` | -- | Actual data of the component. | `KupImageListDataNode[]` | `[]` |
 | `ripple` | `ripple` | When enabled displays Material's ripple effect on clicked items. | `boolean` | `true` |
 | `rows` | `rows` | Number of rows to display in the grid layout. | `number` | `null` |
 | `selectedNode` | -- | An array of integers containing the path to a selected child.\  | `number[]` | `[]` |
 | `stateId` | `state-id` |  | `string` | `''` |
 | `store` | -- |  | `KupStore` | `undefined` |
-=======
-| Property       | Attribute      | Description                                                      | Type                     | Default     |
-| -------------- | -------------- | ---------------------------------------------------------------- | ------------------------ | ----------- |
-| `columns`      | `columns`      | Number of columns to display in the grid layout.                 | `number`                 | `null`      |
-| `customStyle`  | `custom-style` | Custom style of the component.                                   | `string`                 | `''`        |
-| `data`         | --             | Actual data of the component.                                    | `KupImageListDataNode[]` | `[]`        |
-| `ripple`       | `ripple`       | When enabled displays Material's ripple effect on clicked items. | `boolean`                | `true`      |
-| `rows`         | `rows`         | Number of rows to display in the grid layout.                    | `number`                 | `null`      |
-| `selectedNode` | --             | An array of integers containing the path to a selected child.\   | `number[]`               | `[]`        |
-| `stateId`      | `state-id`     |                                                                  | `string`                 | `''`        |
-| `store`        | --             |                                                                  | `KupStore`               | `undefined` |
-
->>>>>>> Stashed changes
 
 ## Events
 
-| Event                       | Description | Type                                    |
-| --------------------------- | ----------- | --------------------------------------- |
-| `kup-imagelist-click`       |             | `CustomEvent<KupImageListEventPayload>` |
-| `kup-imagelist-contextmenu` |             | `CustomEvent<KupImageListEventPayload>` |
-| `kup-imagelist-dblclick`    |             | `CustomEvent<KupImageListEventPayload>` |
-
+| Event | Description | Type |
+| --- | --- | --- |
+| `kup-imagelist-click` |  | `CustomEvent<KupImageListEventPayload>` |
+| `kup-imagelist-contextmenu` |  | `CustomEvent<KupImageListEventPayload>` |
+| `kup-imagelist-dblclick` |  | `CustomEvent<KupImageListEventPayload>` |
 
 ## Methods
 
@@ -47,8 +31,8 @@ Used to retrieve component's props values.
 
 #### Parameters
 
-| Name           | Type      | Description                                                                            |
-| -------------- | --------- | -------------------------------------------------------------------------------------- |
+| Name | Type | Description |
+| --- | --- | --- |
 | `descriptions` | `boolean` | - When provided and true, the result will be the list of props with their description. |
 
 #### Returns
@@ -65,66 +49,61 @@ This method is used to trigger a new render of the component.
 
 Type: `Promise<void>`
 
-
-
 ### `setProps(props: GenericObject) => Promise<void>`
 
 Sets the props to the component.
 
 #### Parameters
 
-| Name    | Type            | Description                                                  |
-| ------- | --------------- | ------------------------------------------------------------ |
+| Name | Type | Description |
+| --- | --- | --- |
 | `props` | `GenericObject` | - Object containing props that will be set to the component. |
 
 #### Returns
 
 Type: `Promise<void>`
 
-
-
-
 ## CSS Custom Properties
 
-| Name                                 | Description                                               |
-| ------------------------------------ | --------------------------------------------------------- |
-| `--kup-imagelist-background-color`   | Sets the background color of the component.               |
-| `--kup-imagelist-columns`            | Sets the number of columns of the grid.                   |
-| `--kup-imagelist-grid-gap`           | Sets the gap of the grid.                                 |
-| `--kup-imagelist-image-margin`       | Sets the margin of the images.                            |
-| `--kup-imagelist-image-min-height`   | Sets the minimun height of the images (useful for icons). |
-| `--kup-imagelist-item-border-radius` | Sets the border radius of items.                          |
-| `--kup-imagelist-item-height`        | Sets the height of an item.                               |
-| `--kup-imagelist-item-padding`       | Sets the padding of an item.                              |
-| `--kup-imagelist-item-width`         | Sets the width of an item.                                |
-| `--kup-imagelist-label-margin`       | Sets the margin of the labels.                            |
-| `--kup-imagelist-primary-color`      | Sets the primary color of the component (ripple effect).  |
-| `--kup-imagelist-primary-color-rgb`  | Sets the RGB values of the primary color.                 |
-| `--kup-imagelist-text-color`         | Sets the text color of the labels.                        |
-
+| Name | Description |
+| --- | --- |
+| `--kup-imagelist-background-color` | Sets the background color of the component. |
+| `--kup-imagelist-columns` | Sets the number of columns of the grid. |
+| `--kup-imagelist-grid-gap` | Sets the gap of the grid. |
+| `--kup-imagelist-image-margin` | Sets the margin of the images. |
+| `--kup-imagelist-image-min-height` | Sets the minimun height of the images (useful for icons). |
+| `--kup-imagelist-item-border-radius` | Sets the border radius of items. |
+| `--kup-imagelist-item-height` | Sets the height of an item. |
+| `--kup-imagelist-item-padding` | Sets the padding of an item. |
+| `--kup-imagelist-item-width` | Sets the width of an item. |
+| `--kup-imagelist-label-margin` | Sets the margin of the labels. |
+| `--kup-imagelist-primary-color` | Sets the primary color of the component (ripple effect). |
+| `--kup-imagelist-primary-color-rgb` | Sets the RGB values of the primary color. |
+| `--kup-imagelist-text-color` | Sets the text color of the labels. |
 
 ## Dependencies
 
 ### Depends on
 
-- [kup-card](../kup-card)
-- [kup-dialog](../kup-dialog)
-- [kup-badge](../kup-badge)
-- [kup-autocomplete](../kup-autocomplete)
-- [kup-chip](../kup-chip)
-- [kup-text-field](../kup-text-field)
-- [kup-color-picker](../kup-color-picker)
-- [kup-combobox](../kup-combobox)
-- [kup-date-picker](../kup-date-picker)
-- [kup-rating](../kup-rating)
-- [kup-time-picker](../kup-time-picker)
-- [kup-image](../kup-image)
-- [kup-button-list](../kup-button-list)
-- [kup-chart](../kup-chart)
-- [kup-gauge](../kup-gauge)
-- [kup-progress-bar](../kup-progress-bar)
+-   [kup-card](../kup-card)
+-   [kup-dialog](../kup-dialog)
+-   [kup-badge](../kup-badge)
+-   [kup-autocomplete](../kup-autocomplete)
+-   [kup-chip](../kup-chip)
+-   [kup-text-field](../kup-text-field)
+-   [kup-color-picker](../kup-color-picker)
+-   [kup-combobox](../kup-combobox)
+-   [kup-date-picker](../kup-date-picker)
+-   [kup-rating](../kup-rating)
+-   [kup-time-picker](../kup-time-picker)
+-   [kup-image](../kup-image)
+-   [kup-button-list](../kup-button-list)
+-   [kup-chart](../kup-chart)
+-   [kup-gauge](../kup-gauge)
+-   [kup-progress-bar](../kup-progress-bar)
 
 ### Graph
+
 ```mermaid
 graph TD;
   kup-image-list --> kup-card
@@ -296,6 +275,6 @@ graph TD;
   style kup-image-list fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
-----------------------------------------------
+---
 
-*Built with [StencilJS](https://stenciljs.com/)*
+_Built with [StencilJS](https://stenciljs.com/)_

From fdeb3cec271daa3be0a9272902ec0f13d9a6001d Mon Sep 17 00:00:00 2001
From: Leonardo-Signorelli <leonardo.signorelliv@gmail.com>
Date: Wed, 3 Apr 2024 10:00:00 +0200
Subject: [PATCH 4/5] Kup-tab-bar : resizing

---
 packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss b/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss
index 5b409bba7b..5a937f5eaa 100644
--- a/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss
+++ b/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss
@@ -74,6 +74,7 @@
       gap: 8px;
       margin: 0px;
       border: none;
+      flex: 1 0;
       outline: 2px solid transparent;
       outline-offset: -2px;
       background: none;

From b05ff43690833bb259f9000b48da87ac66c9625c Mon Sep 17 00:00:00 2001
From: Leonardo-Signorelli <leonardo.signorelliv@gmail.com>
Date: Thu, 4 Apr 2024 16:05:02 +0200
Subject: [PATCH 5/5] f-button : kup-neutral

---
 .../src/f-components/f-button/f-button.scss   | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/packages/ketchup/src/f-components/f-button/f-button.scss b/packages/ketchup/src/f-components/f-button/f-button.scss
index a48659ba96..16e8197e63 100644
--- a/packages/ketchup/src/f-components/f-button/f-button.scss
+++ b/packages/ketchup/src/f-components/f-button/f-button.scss
@@ -422,6 +422,50 @@
     }
   }
 
+  .icon-button {
+    background-color: transparent;
+    display: inline-block;
+    position: relative;
+    box-sizing: border-box;
+    border: none;
+    outline: none;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    padding: 0.75em;
+    @include kup-body-compact-01;
+    .icon-button__icon .f-image__icon {
+      background: var(--kup-gray-color-70);
+    }
+
+    &:hover,
+    &:focus {
+      background-color: var(--kup-gray-color-60);
+      .icon-button__icon .f-image__icon {
+        background: var(--kup-gray-color-0) !important;
+      }
+    }
+
+    .icon-button__icon {
+      display: flex;
+      margin: auto;
+
+      &.icon-button__icon--on {
+        display: none;
+      }
+    }
+
+    &.button--disabled {
+      opacity: 0.75;
+      pointer-events: none;
+    }
+
+    .icon-button__spinner-container {
+      width: var(--kup_button_spinner_width);
+      height: var(--kup_button_spinner_height);
+    }
+  }
+
   &.#{$kup-class-full-height} {
     height: 100%;