@sc-360-v2/storefront-cms-library 0.5.64 → 0.5.66

package/dist/table.scss

@@ -26,9 +26,10 @@
     & > .wrapper {
       width: 100%;
 
-      .pagination:hover {
-        --_sf-bd-cr: var(--_ctm-dn-pn-hr-se-bd-cr, var(--_tst-dn-pn-hr-se-bd-cr));
-      }
+      // No `.pagination:hover` fill rule: hovering anywhere on the strip used to
+      // recolour the whole thing from the hover background key. The row's colour comes
+      // from Default Page Style now, and Hover State colours the page chip under the
+      // pointer rather than the entire bar.
 
       .pagination .active:hover {
         cursor: pointer;
@@ -46,9 +47,24 @@
         --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
       }
     }
-    &[data-widget-shadow="false"] {
+    // Table Widget > Box Shadow, as an opt-in on the attribute rather than through the
+    // inherited `--_show-shadow` sentinel it used to use.
+    //
+    // `--_show-shadow` is a custom property, so it INHERITS. 69 element stylesheets
+    // set it to `none` on themselves when their own shadow is off, and any one of them
+    // wrapping a Table passed that `none` straight down — `var(--_show-shadow, …)`
+    // then resolved to `none` and never reached its fallback, so the Table's own Box
+    // Shadow did nothing. Keying off the element's own attribute cannot be inherited
+    // into. This is the same shape the Load More button in this file already uses.
+    &[data-widget-shadow="true"] {
       .table__wrapper {
-        --_show-shadow: none;
+        box-shadow: var(
+            --_ctm-mob-dn-te-wt-sw-ae,
+            var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae))
+          )
+          var(--_ctm-mob-dn-te-wt-sw-br, var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br)))
+          var(--_ctm-mob-dn-te-wt-sw-sd, var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd)))
+          var(--_ctm-mob-dn-te-wt-sw-cr, var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr)));
       }
     }
     &[data-widget-border="true"] {
@@ -241,13 +257,8 @@
         var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs)))
       );
 
-      box-shadow: var(
-        --_show-shadow,
-        var(--_ctm-mob-dn-te-wt-sw-ae, var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae)))
-          var(--_ctm-mob-dn-te-wt-sw-br, var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br)))
-          var(--_ctm-mob-dn-te-wt-sw-sd, var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd)))
-          var(--_ctm-mob-dn-te-wt-sw-cr, var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr)))
-      );
+      // Off by default; the `[data-widget-shadow="true"]` rule above turns it on.
+      box-shadow: none;
 
       width: 100%;
 
@@ -375,11 +386,26 @@
         }
         tbody {
           .tbody__row__divider {
-            background-color: var(
-              --_ctm-mob-dn-te-rw-bd-cr,
-              var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
+            // Table Rows carries Default / Hover states now. The default state falls
+            // back to the old flat `te-rw-bd-cr`, which is what tables saved before
+            // the split still paint from.
+            background-color: prepareMediaVariable(
+              --_ctm-dn-te-rw-dt-se-bd-cr,
+              prepareMediaVariable(--_ctm-dn-te-rw-bd-cr)
             );
 
+            // Hover falls back to the default state, so a row with no hover colour
+            // set simply keeps its own.
+            &:hover {
+              background-color: prepareMediaVariable(
+                --_ctm-dn-te-rw-hr-se-bd-cr,
+                prepareMediaVariable(
+                  --_ctm-dn-te-rw-dt-se-bd-cr,
+                  prepareMediaVariable(--_ctm-dn-te-rw-bd-cr)
+                )
+              );
+            }
+
             height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));
 
             .td__col__divider {
@@ -484,33 +510,112 @@
         align-items: var(--_align-center);
         justify-content: var(--_ctm-mob-lt-pn-at, var(--_ctm-tab-lt-pn-at, var(--_ctm-lt-pn-at)));
         margin-top: 10px;
-        background-color: var(
-          --_sf-bd-cr,
-          var(
-            --_ctm-mob-dn-pn-dt-se-bd-cr,
-            var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))
-          )
-        );
+        // Default Page Style > Background Color fills the whole pagination row.
+        // Note this is the PAGE key, not the arrows' `pn-dt-se-bd-cr` — the bar used
+        // to read that one, which is why colouring the arrows flooded the strip.
+        background-color: prepareMediaVariable(--_ctm-dn-pn-dt-se-pe-bd-cr, transparent);
+        gap: 12px;
         &.pagination__center {
           justify-content: var(justify-center);
         }
 
+        // Pagination arrows, styled the way the Gallery Slider and Allocation Details
+        // elements style theirs: a plain 10px-padded button sized by Arrow Size, whose
+        // only fill is the chosen Background Color mixed down to 10% (20% on hover),
+        // with Background Shape deciding the corner.
         button {
+          padding: 10px;
+          border: none;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          outline: none;
+          width: prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-se, 20px);
+          height: prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-se, 20px);
+
+          @include BgColorLighter(var(--_ctm-dn-pn-dt-se-bd-cr), 10%);
+          // Hover. Pagination offers a Default state only, so there are no hover-state
+          // variables to read — the button simply lifts its own fill, which is what it
+          // did before the state existed.
+          &:not(:disabled):hover {
+            @include BgColorLighter(var(--_ctm-dn-pn-dt-se-bd-cr), 20%);
+          }
+
+          // Background Shape. Keyed off the button, which is where the renderer
+          // publishes the attribute alongside the copy on the container.
+          &[data-background-shape="None"] {
+            border-radius: 0;
+          }
+          &[data-background-shape="Round"] {
+            border-radius: 50%;
+          }
+          &[data-background-shape="Square"] {
+            border-radius: 4px;
+          }
+
           svg {
-            width: var(--_width-18);
-            height: var(--_height-18);
-            path {
-              stroke: var(--_gray-500);
-              // stroke: var(--_ctm-dn-pn-in-c1, var(--_tst-dn-pn-in-c1));
-  // Overrides the stroke-width presentation attribute baked into the icon markup.
-  stroke-width: prepareMediaVariable(--_ctm-dn-pn-se-wh, 1.25);
+            width: calc(#{prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-se, 20px)} * 0.5);
+            height: calc(#{prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-se, 20px)} * 0.5);
+
+            // Arrow Color. A library glyph paints with `stroke` on its paths while an
+            // uploaded one may use `fill`, or set either on the root.
+            &[stroke]:not([stroke="none"]),
+            [stroke]:not([stroke="none"]) {
+              stroke: prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-cr, var(--_gray-500));
+            }
+            &[fill]:not([fill="none"]),
+            [fill]:not([fill="none"]) {
+              fill: prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-cr, var(--_gray-500));
             }
           }
         }
-        span {
+        // The page chip. `> span` deliberately, not a bare `span`: the page markup is
+        // an outer span wrapping an inner one that holds the number, so a descendant
+        // selector matched BOTH — the inner span picked up the padding and the fill
+        // and painted a tight box around the digits instead of the chip being filled.
+        & > span {
           float: left;
           padding: var(--_pd-8) var(--_pd-16);
           text-decoration: none;
+
+          // inline-flex so the fill covers the whole padded chip, and so the number
+          // sits centred in it once Background Shape rounds the corners.
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          box-sizing: border-box;
+
+          // No fill of its own: Default Page Style > Background Color paints the whole
+          // row (see `.pagination` above), so repeating it here would draw a second,
+          // tighter block of the same colour on top of it. The chip contributes its
+          // Shape, and takes the Hover state's colour while pointed at.
+          background-color: transparent;
+          &[data-page-shape="rectangle"] {
+            border-radius: 0;
+          }
+          &[data-page-shape="rounded"] {
+            border-radius: 4px;
+          }
+          &[data-page-shape="circle"] {
+            border-radius: 50%;
+            // A circle needs equal sides, so the chip is at least as wide as it is
+            // tall however few digits the number has.
+            aspect-ratio: 1;
+            padding: var(--_pd-8);
+          }
+          // No hover fill: Pagination offers a Default state only, so there is no
+          // hover-state colour to read. The chip's shape and the row's fill are the
+          // whole of Default Page Style.
+
+          // The inner span is the number itself — it carries the typography, never the
+          // chip's box, so it must not repeat the fill or the padding.
+          & > span {
+            float: none;
+            padding: 0;
+            background-color: transparent;
+          }
           span {
             // color: var(--_sf-hr-fc, var(--_ctm-dn-pn-bn-cr, var(--_tst-dn-pn-bn-cr)));
             // font-size: var(--_sf-hr-fs, var(--_ctm-dn-pn-ft-se, var(--_tst-dn-pn-ft-se)));
@@ -632,16 +737,13 @@
             );
           }
         }
+        // Arrow Color / Arrow Size for anything drawn as text in this button; the SVG
+        // itself is sized and coloured by the `button svg` rules above. These read the
+        // shared arrow keys now, not the `iconSize` / `iconColor` the section carried
+        // before it moved to the Slider Arrows shape.
         .pagination__arrows {
-          color: var(
-            --_sf-hr-fc,
-            var(--_ctm-mob-dn-pn-in-c1, var(--_ctm-tab-dn-pn-in-c1, var(--_ctm-dn-pn-in-c1)))
-          );
-
-          font-size: var(
-            --_sf-hr-fs,
-            var(--_ctm-mob-dn-pn-in-se, var(--_ctm-tab-dn-pn-in-se, var(--_ctm-dn-pn-in-se)))
-          );
+          color: prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-cr);
+          font-size: prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-se);
         }
       }
 

package/dist/types/builder/tools/element-edit/cartSummary.d.ts

@@ -232,12 +232,22 @@ export declare const getDefaultData: () => {
             property: string;
             propertyType: CMSElementEditTypes;
         };
+        dividerStyle: {
+            value: string;
+            property: string;
+            propertyType: CMSElementEditTypes;
+        };
+        dividerThickness: {
+            value: number;
+            property: string;
+            propertyType: CMSElementEditTypes;
+            unit: number;
+        };
     };
     design: {
         selectorKey: SelectorKeysEnum;
         accordionArrowsItem: {
             selectorKey: SelectorKeysEnum;
-            showIcon: CMSIBCommonInterface | undefined;
             iconColor: CMSIBCommonInterface;
             strokeWidth: import("../../interfaces/global").CMSIBSizeInterface;
             iconSize: import("../../interfaces/global").CMSIBSizeInterface;
@@ -254,7 +264,6 @@ export declare const getDefaultData: () => {
                 isReadOnly?: boolean | undefined;
                 parentRef?: string | undefined;
             };
-            showIconDesc: CMSIBCommonInterface | undefined;
             iconColorDesc: CMSIBCommonInterface;
             strokeWidthDesc: {
                 property: string;
@@ -325,24 +334,6 @@ export declare const getDefaultData: () => {
                 property: string;
                 propertyType: CMSElementEditTypes;
             };
-            textTransform: {
-                value: string;
-                property: string;
-                propertyType: CMSElementEditTypes;
-            };
-            theme: CMSIBCommonInterface;
-            font: CMSIBCommonInterface;
-            fontSize: import("../../interfaces/global").CMSIBSizeInterface;
-            textColor: CMSIBCommonInterface;
-            bold: CMSIBCommonInterface;
-            italic: CMSIBCommonInterface;
-            linethrough: CMSIBCommonInterface;
-            underline: CMSIBCommonInterface;
-            textAlign: CMSIBCommonInterface;
-            characterSpacing: import("../../interfaces/global").CMSIBSizeInterface;
-            lineHeight: import("../../interfaces/global").CMSIBSizeInterface;
-            textOverflow: any;
-            numberOfDisplayedLines: any;
             borderColor: CMSIBCommonInterface;
             borderStyle: CMSIBCommonInterface;
             borderPerSlide: import("../../interfaces/global").CSSPaddingValues;

package/dist/types/builder/tools/element-edit/countdown.d.ts

@@ -1,4 +1,4 @@
-import { CMSElementEditTypes } from "../../enums";
+import { CMSCSSUnitTypesEnums, CMSElementEditTypes } from "../../enums";
 import { CMSIBCommonInterface } from "../../interfaces/global";
 import { CMSElementEditPopupInterface } from "./common";
 export interface SectionEditPopupInterface extends CMSElementEditPopupInterface {
@@ -153,7 +153,7 @@ export declare const getDefaultData: () => {
             dividerWeight: {
                 value: string;
                 property: string;
-                unit: import("../../enums").CMSCSSUnitTypesEnums;
+                unit: CMSCSSUnitTypesEnums;
                 propertyType: CMSElementEditTypes;
             };
             dividerColor: {
@@ -402,6 +402,12 @@ export declare const getDefaultData: () => {
         };
         countdownWidgetTextContainerLayout: {
             selectorKey: SelectorKeysEnum;
+            textContainerWidth: {
+                value: string;
+                property: string;
+                unit: CMSCSSUnitTypesEnums;
+                propertyType: CMSElementEditTypes;
+            };
             textVerticalPadding: {
                 value: string;
                 property: string;

package/dist/types/builder/tools/element-edit/filters.d.ts

@@ -28,6 +28,7 @@ interface selfLayoutInterface {
     showMoreItems: CMSIBCommonInterface;
     verticalSpacingBetweenItems: CMSIBCommonInterface;
     showOptionsFilter: CMSIBCommonInterface;
+    selectedItemsView: CMSIBCommonInterface;
 }
 interface selfDesignInterface {
     selectorKey: string;
@@ -93,6 +94,8 @@ export declare enum SelectorKeysEnum {
     CHIP_BUTTON_HOVER_STATE = "selectedItemHoverState",
     OPTION_STYLE = "optionStyle",
     SEARCH_BAR = "searchBar",
+    SEARCH_BAR_DEFAULT_STATE = "searchBarDefaultState",
+    SEARCH_BAR_FOCUS_STATE = "searchBarFocusState",
     MORE_BUTTON = "moreButton",
     MORE_BUTTON_DEFAULT_STATE = "moreButtonDefaultState",
     MORE_BUTTON_HOVER_STATE = "moreButtonHoverState",

package/dist/types/builder/tools/element-edit/productActions.d.ts

@@ -16,6 +16,7 @@ export interface ButtonLayoutInterface {
     showCompareListAs: CMSIBCommonInterface;
     addToQuote: CMSIBCommonInterface;
     addToOrderTemplate: CMSIBCommonInterface;
+    viewDetails: CMSIBCommonInterface;
     notifyMe: CMSIBCommonInterface;
     download: CMSIBCommonInterface;
     displayStyle: CMSIBCommonInterface;
@@ -41,6 +42,7 @@ export interface selfDesignInterface {
     compare: any;
     addToQuote: any;
     addToOrderTemplate: any;
+    viewDetails: any;
     notifyMe: any;
     download: any;
     hoverState: any;
@@ -59,6 +61,7 @@ export declare enum ButtonSelectorKeysEnum {
     COMPARE = "compare",
     ADD_TO_QUOTE = "addToQuote",
     ADD_TO_ORDER_TEMPLATE = "addToOrderTemplate",
+    VIEW_DETAILS = "viewDetails",
     NOTIFY_ME = "notifyMe",
     DOWNLOAD = "download",
     MORE = "more",

package/dist/types/builder/tools/element-edit/quotes.d.ts

@@ -33,6 +33,49 @@ interface selfDesignInterface {
     quoteStatus: {
         selectorKey: string;
     };
+    iconActions: {
+        selectorKey: string;
+        viewIcon: {
+            selectorKey: string;
+            showIcon: CMSIBCommonInterface;
+            iconSize: CMSIBCommonInterface;
+            iconColor: CMSIBCommonInterface;
+            strokeWidth: CMSIBCommonInterface;
+            icon: CMSIBCommonInterface;
+        };
+        printIcon: {
+            selectorKey: string;
+            showIcon: CMSIBCommonInterface;
+            iconSize: CMSIBCommonInterface;
+            iconColor: CMSIBCommonInterface;
+            strokeWidth: CMSIBCommonInterface;
+            icon: CMSIBCommonInterface;
+        };
+        downloadIcon: {
+            selectorKey: string;
+            showIcon: CMSIBCommonInterface;
+            iconSize: CMSIBCommonInterface;
+            iconColor: CMSIBCommonInterface;
+            strokeWidth: CMSIBCommonInterface;
+            icon: CMSIBCommonInterface;
+        };
+        cancelIcon: {
+            selectorKey: string;
+            showIcon: CMSIBCommonInterface;
+            iconSize: CMSIBCommonInterface;
+            iconColor: CMSIBCommonInterface;
+            strokeWidth: CMSIBCommonInterface;
+            icon: CMSIBCommonInterface;
+        };
+        sendMessageIcon: {
+            selectorKey: string;
+            showIcon: CMSIBCommonInterface;
+            iconSize: CMSIBCommonInterface;
+            iconColor: CMSIBCommonInterface;
+            strokeWidth: CMSIBCommonInterface;
+            icon: CMSIBCommonInterface;
+        };
+    };
     paginationArrows: {
         selectorKey: string;
         arrowIconStyle: CMSIBCommonInterface;
@@ -41,6 +84,7 @@ interface selfDesignInterface {
         backgroundShape: CMSIBCommonInterface;
         arrowSize: CMSIBCommonInterface;
         arrowColor: CMSIBCommonInterface;
+        backgroundColor: CMSIBCommonInterface;
     };
 }
 export declare enum SelectorKeysEnum {
@@ -52,6 +96,12 @@ export declare enum SelectorKeysEnum {
     QUOTE_ID = "quoteId",
     RAISED_ON = "raisedOn",
     QUOTE_STATUS = "quoteStatus",
+    ICON_ACTIONS = "iconActions",
+    VIEW_ICON = "viewIcon",
+    PRINT_ICON = "printIcon",
+    DOWNLOAD_ICON = "downloadIcon",
+    CANCEL_ICON = "cancelIcon",
+    SEND_MESSAGE_ICON = "sendMessageIcon",
     PAGINATION_ARROWS = "pagination-arrows"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;

package/dist/types/builder/tools/element-edit/searchResultsHeading.d.ts

@@ -8,67 +8,41 @@ interface selfLayoutInterface {
     showSearchKeyword: CMSIBCommonInterface;
     showNoOfResults: CMSIBCommonInterface;
 }
+interface textDesignInterface {
+    selectorKey: string;
+    backgroundColor: CMSIBCommonInterface;
+    borderColor: CMSIBCommonInterface;
+    borderStyle: CMSIBCommonInterface;
+    borderPerSlide: CMSIBCommonInterface;
+    showBorder: CMSIBCommonInterface;
+    showShadow: CMSIBCommonInterface;
+    shadowColor: CMSIBCommonInterface;
+    blur: CMSIBCommonInterface;
+    spread: CMSIBCommonInterface;
+    angle: CMSIBCommonInterface;
+    borderRadius: CMSIBCommonInterface;
+    theme: CMSIBCommonInterface;
+    font: CMSIBCommonInterface;
+    fontSize: CMSIBCommonInterface;
+    textColor: CMSIBCommonInterface;
+    bold: CMSIBCommonInterface;
+    italic: CMSIBCommonInterface;
+    linethrough: CMSIBCommonInterface;
+    underline: CMSIBCommonInterface;
+    textAlign: CMSIBCommonInterface;
+    characterSpacing: CMSIBCommonInterface;
+    lineHeight: CMSIBCommonInterface;
+    textTransform: CMSIBCommonInterface;
+    wordWrap: CMSIBCommonInterface;
+    wordBreak: CMSIBCommonInterface;
+    textOverflow?: any;
+    numberOfDisplayedLines?: any;
+}
 export interface selfDesignInterface {
     selectorKey: string;
-    searchResultsNumber: {
-        selectorKey: string;
-        backgroundColor?: CMSIBCommonInterface;
-        borderColor?: CMSIBCommonInterface;
-        borderStyle?: CMSIBCommonInterface;
-        borderPerSlide?: CMSIBCommonInterface;
-        showBorder?: CMSIBCommonInterface;
-        showShadow?: CMSIBCommonInterface;
-        shadowColor?: CMSIBCommonInterface;
-        blur?: CMSIBCommonInterface;
-        spread?: CMSIBCommonInterface;
-        angle?: CMSIBCommonInterface;
-        borderRadius?: CMSIBCommonInterface;
-        theme: CMSIBCommonInterface;
-        font: CMSIBCommonInterface;
-        fontSize: CMSIBCommonInterface;
-        textColor: CMSIBCommonInterface;
-        bold: CMSIBCommonInterface;
-        italic: CMSIBCommonInterface;
-        linethrough: CMSIBCommonInterface;
-        underline: CMSIBCommonInterface;
-        textAlign: CMSIBCommonInterface;
-        characterSpacing: CMSIBCommonInterface;
-        lineHeight: CMSIBCommonInterface;
-        textOverflow?: any;
-        numberOfDisplayedLines?: any;
-    };
-    searchKeyword: {
-        selectorKey: string;
-        theme: CMSIBCommonInterface;
-        font: CMSIBCommonInterface;
-        fontSize: CMSIBCommonInterface;
-        textColor: CMSIBCommonInterface;
-        bold: CMSIBCommonInterface;
-        italic: CMSIBCommonInterface;
-        linethrough: CMSIBCommonInterface;
-        underline: CMSIBCommonInterface;
-        textAlign: CMSIBCommonInterface;
-        characterSpacing: CMSIBCommonInterface;
-        lineHeight: CMSIBCommonInterface;
-        textOverflow?: any;
-        numberOfDisplayedLines?: any;
-    };
-    otherText: {
-        selectorKey: string;
-        theme: CMSIBCommonInterface;
-        font: CMSIBCommonInterface;
-        fontSize: CMSIBCommonInterface;
-        textColor: CMSIBCommonInterface;
-        bold: CMSIBCommonInterface;
-        italic: CMSIBCommonInterface;
-        linethrough: CMSIBCommonInterface;
-        underline: CMSIBCommonInterface;
-        textAlign: CMSIBCommonInterface;
-        characterSpacing: CMSIBCommonInterface;
-        lineHeight: CMSIBCommonInterface;
-        textOverflow?: any;
-        numberOfDisplayedLines?: any;
-    };
+    searchResultsNumber: textDesignInterface;
+    searchKeyword: textDesignInterface;
+    otherText: textDesignInterface;
 }
 export declare enum searchResultsHeadingSelectorKeysEnum {
     LAYOUT = "layout",

package/dist/types/builder/tools/element-edit/table.d.ts

@@ -78,6 +78,14 @@ export interface TableControlInterface {
     tableRow?: {
         selectorKey?: string;
         backgroundColor?: CMSIBCommonInterface;
+        defaultState?: {
+            selectorKey?: string;
+            backgroundColor?: CMSIBCommonInterface;
+        };
+        hoverState?: {
+            selectorKey?: string;
+            backgroundColor?: CMSIBCommonInterface;
+        };
     };
     rowText?: {
         selectorKey?: string;
@@ -140,6 +148,12 @@ export interface TableControlInterface {
         hoverState?: {
             selectorKey: string;
             theme: CMSIBCommonInterface;
+            previousIcon?: CMSIBCommonInterface;
+            nextIcon?: CMSIBCommonInterface;
+            iconSize?: CMSIBCommonInterface;
+            iconColor?: CMSIBCommonInterface;
+            strokeWidth?: CMSIBCommonInterface;
+            [key: string]: any;
             backgroundShape?: CMSIBCommonInterface;
             backgroundColor?: CMSIBCommonInterface;
             font?: CMSIBCommonInterface;