@ganpatiinfo/gids-web-dom-reference 4.0.0 → 6.0.0

package/dist/components/GidsTopNavigation/GidsTopNavigation.js

@@ -3,11 +3,14 @@ import { appendAsChildren, } from '../../utils/domUtils.js';
 import { GidsSearchBarDom, } from '../GidsSearchBar/GidsSearchBar.js';
 import { GidsSegmentedControlDom, } from '../GidsSegmentedControl/GidsSegmentedControl.js';
 import { GidsLogoDom } from '../GidsLogo/GidsLogo.js';
+import { GidsDividerDom } from '../GidsDivider/GidsDivider.js';
 const { getGidsTopNavigationClassNames } = GidsTopNavigationWebUtils;
 export const GidsTopNavigationDom = (props) => {
-    const { isDefaultLeftContentRender = true, isDefaultMiddleContentRender = true, isDefaultRightContentRender = true, leftContent, middleContent, rightContent, src, imgHeight = '100', href, clickable, onPress, width, tabItems = [], extraClasses, ...rest } = props;
+    const { isDefaultLeftContentRender = true, isDefaultMiddleContentRender = true, isDefaultRightContentRender = true, leftContent, middleContent, rightContent, src, imgHeight = '100', href, clickable, onPress, width, tabItems = [], extraClasses, invertedInDarkMode, invertedInLightMode, dividerVisible = true, topNavigationAppearance = 'default', ...rest } = props;
     const topNavigation = document.createElement('nav');
-    topNavigation.className = getGidsTopNavigationClassNames(extraClasses);
+    topNavigation.className = getGidsTopNavigationClassNames({ topNavigationAppearance }, extraClasses);
+    const topNavigationWrapper = document.createElement('div');
+    topNavigationWrapper.className = 'gids-top-navigation__wrapper';
     const leftContentContainer = document.createElement('div');
     leftContentContainer.className = 'gids-top-navigation__left-content';
     if (leftContent || isDefaultLeftContentRender) {
@@ -21,9 +24,11 @@ export const GidsTopNavigationDom = (props) => {
                 alt: 'logo-img',
                 href: href && href !== '' ? href : '/',
                 clickable,
+                invertedInDarkMode,
+                invertedInLightMode,
             }));
         }
-        topNavigation.appendChild(leftContentContainer);
+        topNavigationWrapper.appendChild(leftContentContainer);
     }
     const middleContentContainer = document.createElement('div');
     middleContentContainer.className = 'gids-top-navigation__middle-content';
@@ -39,7 +44,7 @@ export const GidsTopNavigationDom = (props) => {
                 ...rest,
             }));
         }
-        topNavigation.appendChild(middleContentContainer);
+        topNavigationWrapper.appendChild(middleContentContainer);
     }
     const rightContentContainer = document.createElement('div');
     rightContentContainer.className = 'gids-top-navigation__right-content';
@@ -54,7 +59,14 @@ export const GidsTopNavigationDom = (props) => {
                 onPress,
             }));
         }
-        topNavigation.appendChild(rightContentContainer);
+        topNavigationWrapper.appendChild(rightContentContainer);
+    }
+    topNavigation.appendChild(topNavigationWrapper);
+    if (dividerVisible) {
+        const dividerWrapper = document.createElement('div');
+        dividerWrapper.className = 'gids-top-navigation__divider-wrapper';
+        dividerWrapper.appendChild(GidsDividerDom({ orientation: 'horizontal' }));
+        topNavigation.appendChild(dividerWrapper);
     }
     return topNavigation;
 };

package/dist/components/GidsTopNavigation/GidsTopNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"GidsTopNavigation.js","sourceRoot":"","sources":["../../../src/components/GidsTopNavigation/GidsTopNavigation.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"GidsTopNavigation.js","sourceRoot":"","sources":["../../../src/components/GidsTopNavigation/GidsTopNavigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,yBAAyB,GAC1B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,gBAAgB,GAGjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,gBAAgB,GAEjB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EACL,uBAAuB,GAExB,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,MAAM,EAAE,8BAA8B,EAAE,GAAG,yBAAyB,CAAC;AAmBrE,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,KAAgC,EACnB,EAAE;IACf,MAAM,EACJ,0BAA0B,GAAG,IAAI,EACjC,4BAA4B,GAAG,IAAI,EACnC,2BAA2B,GAAG,IAAI,EAClC,WAAW,EACX,aAAa,EACb,YAAY,EACZ,GAAG,EACH,SAAS,GAAG,KAAK,EACjB,IAAI,EACJ,SAAS,EACT,OAAO,EACP,KAAK,EACL,QAAQ,GAAG,EAAE,EACb,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,cAAc,GAAG,IAAI,EACrB,uBAAuB,GAAG,SAAS,EACnC,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACpD,aAAa,CAAC,SAAS,GAAG,8BAA8B,CACtD,EAAE,uBAAuB,EAAE,EAC3B,YAAY,CACb,CAAC;IAEF,MAAM,oBAAoB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3D,oBAAoB,CAAC,SAAS,GAAG,8BAA8B,CAAC;IAEhE,MAAM,oBAAoB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3D,oBAAoB,CAAC,SAAS,GAAG,mCAAmC,CAAC;IAErE,IAAI,WAAW,IAAI,0BAA0B,EAAE,CAAC;QAC9C,IAAI,WAAW,EAAE,CAAC;YAChB,gBAAgB,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAC;QACtD,CAAC;QACD,IAAI,0BAA0B,EAAE,CAAC;YAC/B,oBAAoB,CAAC,MAAM,CACzB,WAAW,CAAC;gBACV,GAAG,EAAE,GAAG;gBACR,SAAS,EAAE,SAAS;gBACpB,GAAG,EAAE,UAAU;gBACf,IAAI,EAAE,IAAI,IAAI,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;gBACtC,SAAS;gBACT,kBAAkB;gBAClB,mBAAmB;aACpB,CAAC,CACH,CAAC;QACJ,CAAC;QACD,oBAAoB,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAC;IACzD,CAAC;IAED,MAAM,sBAAsB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC7D,sBAAsB,CAAC,SAAS,GAAG,qCAAqC,CAAC;IAEzE,IAAI,aAAa,IAAI,4BAA4B,EAAE,CAAC;QAClD,IAAI,aAAa,EAAE,CAAC;YAClB,gBAAgB,CAAC,sBAAsB,EAAE,aAAa,CAAC,CAAC;QAC1D,CAAC;QACD,IAAI,4BAA4B,EAAE,CAAC;YACjC,sBAAsB,CAAC,MAAM,CAC3B,gBAAgB,CAAC;gBACf,IAAI,EAAE,SAAS;gBACf,UAAU,EAAE,SAAS;gBACrB,MAAM,EAAE,SAAS;gBACjB,GAAG,IAAI;aACR,CAAC,CACH,CAAC;QACJ,CAAC;QACD,oBAAoB,CAAC,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM,qBAAqB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5D,qBAAqB,CAAC,SAAS,GAAG,oCAAoC,CAAC;IAEvE,IAAI,YAAY,IAAI,2BAA2B,EAAE,CAAC;QAChD,IAAI,YAAY,EAAE,CAAC;YACjB,gBAAgB,CAAC,qBAAqB,EAAE,YAAY,CAAC,CAAC;QACxD,CAAC;QACD,IAAI,2BAA2B,EAAE,CAAC;YAChC,qBAAqB,CAAC,MAAM,CAC1B,uBAAuB,CAAC;gBACtB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW;gBAClC,QAAQ,EAAE,QAAQ;gBAClB,OAAO;aACR,CAAC,CACH,CAAC;QACJ,CAAC;QACD,oBAAoB,CAAC,WAAW,CAAC,qBAAqB,CAAC,CAAC;IAC1D,CAAC;IAED,aAAa,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAC;IAEhD,IAAI,cAAc,EAAE,CAAC;QACnB,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACrD,cAAc,CAAC,SAAS,GAAG,sCAAsC,CAAC;QAClE,cAAc,CAAC,WAAW,CAAC,cAAc,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC;QAC1E,aAAa,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAC5C,CAAC;IAED,OAAO,aAAa,CAAC;AACvB,CAAC,CAAC"}

package/dist/index.d.ts

@@ -59,6 +59,11 @@ export * from './components/GidsOverlayProvider/GidsOverlayProvider.js';
 export * from './components/GidsSnackbar/GidsSnackbar.js';
 export * from './components/_GidsNotificationContainer/GidsNotificationContainer.js';
 export * from './components/GidsNotification/GidsNotification.js';
+export * from './components/GidsSideMenuItem/GidsSideMenuItem.js';
+export * from './components/GidsScrim/GidsScrim.js';
+export * from './components/GidsSideMenuHeader/GidsSideMenuHeader.js';
+export * from './components/GidsSideMenu/GidsSideMenu.js';
+export * from './components/GidsSideNavigation/GidsSideNavigation.js';
 /**
  * Utilities
  */

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,mCAAmC,CAAC;AAClD,cAAc,uDAAuD,CAAC;AACtE,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wDAAwD,CAAC;AACvE,cAAc,yCAAyC,CAAC;AACxD,cAAc,mDAAmD,CAAC;AAClE,cAAc,0DAA0D,CAAC;AACzE,cAAc,oDAAoD,CAAC;AACnE,cAAc,sDAAsD,CAAC;AACrE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qDAAqD,CAAC;AACpE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,iDAAiD,CAAC;AAChE,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,iDAAiD,CAAC;AAChE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,qEAAqE,CAAC;AACpF,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iDAAiD,CAAC;AAChE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qDAAqD,CAAC;AACpE,cAAc,uDAAuD,CAAC;AACtE,cAAc,iCAAiC,CAAC;AAChD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uDAAuD,CAAC;AACtE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mCAAmC,CAAC;AAClD,cAAc,wDAAwD,CAAC;AACvE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,2DAA2D,CAAC;AAC1E,cAAc,mCAAmC,CAAC;AAClD,cAAc,qDAAqD,CAAC;AACpE,cAAc,qCAAqC,CAAC;AACpD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qDAAqD,CAAC;AACpE,cAAc,qDAAqD,CAAC;AACpE,cAAc,wEAAwE,CAAC;AACvF,cAAc,6DAA6D,CAAC;AAC5E,cAAc,yCAAyC,CAAC;AACxD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yCAAyC,CAAC;AACxD,cAAc,qDAAqD,CAAC;AACpE,cAAc,8DAA8D,CAAC;AAC7E,cAAc,yDAAyD,CAAC;AACxE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,sEAAsE,CAAC;AACrF,cAAc,mDAAmD,CAAC;AAElE;;GAEG;AACH,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,mCAAmC,CAAC;AAClD,cAAc,uDAAuD,CAAC;AACtE,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wDAAwD,CAAC;AACvE,cAAc,yCAAyC,CAAC;AACxD,cAAc,mDAAmD,CAAC;AAClE,cAAc,0DAA0D,CAAC;AACzE,cAAc,oDAAoD,CAAC;AACnE,cAAc,sDAAsD,CAAC;AACrE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qDAAqD,CAAC;AACpE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,iDAAiD,CAAC;AAChE,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,iDAAiD,CAAC;AAChE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,qEAAqE,CAAC;AACpF,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iDAAiD,CAAC;AAChE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qDAAqD,CAAC;AACpE,cAAc,uDAAuD,CAAC;AACtE,cAAc,iCAAiC,CAAC;AAChD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uDAAuD,CAAC;AACtE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mCAAmC,CAAC;AAClD,cAAc,wDAAwD,CAAC;AACvE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,2DAA2D,CAAC;AAC1E,cAAc,mCAAmC,CAAC;AAClD,cAAc,qDAAqD,CAAC;AACpE,cAAc,qCAAqC,CAAC;AACpD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qDAAqD,CAAC;AACpE,cAAc,qDAAqD,CAAC;AACpE,cAAc,wEAAwE,CAAC;AACvF,cAAc,6DAA6D,CAAC;AAC5E,cAAc,yCAAyC,CAAC;AACxD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yCAAyC,CAAC;AACxD,cAAc,qDAAqD,CAAC;AACpE,cAAc,8DAA8D,CAAC;AAC7E,cAAc,yDAAyD,CAAC;AACxE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,sEAAsE,CAAC;AACrF,cAAc,mDAAmD,CAAC;AAClE,cAAc,mDAAmD,CAAC;AAClE,cAAc,qCAAqC,CAAC;AACpD,cAAc,uDAAuD,CAAC;AACtE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,uDAAuD,CAAC;AAEtE;;GAEG;AACH,cAAc,qBAAqB,CAAC"}

package/dist/index.js

@@ -59,6 +59,11 @@ export * from './components/GidsOverlayProvider/GidsOverlayProvider.js';
 export * from './components/GidsSnackbar/GidsSnackbar.js';
 export * from './components/_GidsNotificationContainer/GidsNotificationContainer.js';
 export * from './components/GidsNotification/GidsNotification.js';
+export * from './components/GidsSideMenuItem/GidsSideMenuItem.js';
+export * from './components/GidsScrim/GidsScrim.js';
+export * from './components/GidsSideMenuHeader/GidsSideMenuHeader.js';
+export * from './components/GidsSideMenu/GidsSideMenu.js';
+export * from './components/GidsSideNavigation/GidsSideNavigation.js';
 /**
  * Utilities
  */

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,mCAAmC,CAAC;AAClD,cAAc,uDAAuD,CAAC;AACtE,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wDAAwD,CAAC;AACvE,cAAc,yCAAyC,CAAC;AACxD,cAAc,mDAAmD,CAAC;AAClE,cAAc,0DAA0D,CAAC;AACzE,cAAc,oDAAoD,CAAC;AACnE,cAAc,sDAAsD,CAAC;AACrE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qDAAqD,CAAC;AACpE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,iDAAiD,CAAC;AAChE,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,iDAAiD,CAAC;AAChE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,qEAAqE,CAAC;AACpF,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iDAAiD,CAAC;AAChE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qDAAqD,CAAC;AACpE,cAAc,uDAAuD,CAAC;AACtE,cAAc,iCAAiC,CAAC;AAChD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uDAAuD,CAAC;AACtE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mCAAmC,CAAC;AAClD,cAAc,wDAAwD,CAAC;AACvE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,2DAA2D,CAAC;AAC1E,cAAc,mCAAmC,CAAC;AAClD,cAAc,qDAAqD,CAAC;AACpE,cAAc,qCAAqC,CAAC;AACpD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qDAAqD,CAAC;AACpE,cAAc,qDAAqD,CAAC;AACpE,cAAc,wEAAwE,CAAC;AACvF,cAAc,6DAA6D,CAAC;AAC5E,cAAc,yCAAyC,CAAC;AACxD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yCAAyC,CAAC;AACxD,cAAc,qDAAqD,CAAC;AACpE,cAAc,8DAA8D,CAAC;AAC7E,cAAc,yDAAyD,CAAC;AACxE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,sEAAsE,CAAC;AACrF,cAAc,mDAAmD,CAAC;AAElE;;GAEG;AACH,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,mCAAmC,CAAC;AAClD,cAAc,uDAAuD,CAAC;AACtE,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wDAAwD,CAAC;AACvE,cAAc,yCAAyC,CAAC;AACxD,cAAc,mDAAmD,CAAC;AAClE,cAAc,0DAA0D,CAAC;AACzE,cAAc,oDAAoD,CAAC;AACnE,cAAc,sDAAsD,CAAC;AACrE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qDAAqD,CAAC;AACpE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,iDAAiD,CAAC;AAChE,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,iDAAiD,CAAC;AAChE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,qEAAqE,CAAC;AACpF,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iDAAiD,CAAC;AAChE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qDAAqD,CAAC;AACpE,cAAc,uDAAuD,CAAC;AACtE,cAAc,iCAAiC,CAAC;AAChD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uDAAuD,CAAC;AACtE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mCAAmC,CAAC;AAClD,cAAc,wDAAwD,CAAC;AACvE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,2DAA2D,CAAC;AAC1E,cAAc,mCAAmC,CAAC;AAClD,cAAc,qDAAqD,CAAC;AACpE,cAAc,qCAAqC,CAAC;AACpD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qDAAqD,CAAC;AACpE,cAAc,qDAAqD,CAAC;AACpE,cAAc,wEAAwE,CAAC;AACvF,cAAc,6DAA6D,CAAC;AAC5E,cAAc,yCAAyC,CAAC;AACxD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yCAAyC,CAAC;AACxD,cAAc,qDAAqD,CAAC;AACpE,cAAc,8DAA8D,CAAC;AAC7E,cAAc,yDAAyD,CAAC;AACxE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,sEAAsE,CAAC;AACrF,cAAc,mDAAmD,CAAC;AAClE,cAAc,mDAAmD,CAAC;AAClE,cAAc,qCAAqC,CAAC;AACpD,cAAc,uDAAuD,CAAC;AACtE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,uDAAuD,CAAC;AAEtE;;GAEG;AACH,cAAc,qBAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ganpatiinfo/gids-web-dom-reference",
-	"version": "4.0.0",
+	"version": "6.0.0",
 	"private": false,
 	"description": "DOM for components reference implementations",
 	"homepage": "https://ganpatiinfosystem.vercel.app/",
@@ -24,8 +24,8 @@
 		"directory": "packages/private/web-dom-reference"
 	},
 	"dependencies": {
-		"@ganpatiinfo/gids-core-shared": "4.0.0",
-		"@ganpatiinfo/gids-web-shared": "4.0.0"
+		"@ganpatiinfo/gids-core-shared": "6.0.0",
+		"@ganpatiinfo/gids-web-shared": "6.0.0"
 	},
 	"peerDependencies": {
 		"@ganpatiinfo/gids-web-theme-interface": "3.1.0",

package/src/components/GidsHeading/GidsHeading.ts

@@ -1,5 +1,7 @@
-import { GidsHeadingCommonProps } from '@ganpatiinfo/gids-core-shared';
-import { GidsHeadingWebUtils } from '@ganpatiinfo/gids-web-shared';
+import {
+  type GidsHeadingWebProps,
+  GidsHeadingWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
 import {
   appendAsChildren,
   DomChildren,
@@ -7,9 +9,12 @@ import {
 } from '../../utils/domUtils.js';
 import { GidsButtonGroupDom } from '../GidsButtonGroup/GidsButtonGroup.js';
 
-const { getGidsHeadingClassNames } = GidsHeadingWebUtils;
+const {
+  getGidsHeadingClassNames,
+  getGidsHeadingSupportingTextTypographyClass,
+} = GidsHeadingWebUtils;
 
-export interface GidsHeadingDomProps extends GidsHeadingCommonProps<
+export interface GidsHeadingDomProps extends GidsHeadingWebProps<
   DomChildren,
   DomNodeOrString
 > {
@@ -20,6 +25,7 @@ export const GidsHeadingDom = (props: GidsHeadingDomProps): HTMLDivElement => {
   const {
     heading,
     supportingText,
+    supportingTextTypography,
     level = 'section',
     children,
     extraClasses,
@@ -48,10 +54,11 @@ export const GidsHeadingDom = (props: GidsHeadingDomProps): HTMLDivElement => {
   if (supportingText) {
     if (typeof supportingText === 'string') {
       const supportingTextEl = document.createElement('span');
-      supportingTextEl.className =
+      supportingTextEl.className = `${
         level === 'section'
           ? 'gids-heading__supporting-text-section'
-          : 'gids-heading__supporting-text-group';
+          : 'gids-heading__supporting-text-group'
+      } ${getGidsHeadingSupportingTextTypographyClass(supportingTextTypography)}`;
       supportingTextEl.textContent = supportingText;
 
       appendAsChildren(contentContainer, supportingTextEl);

package/src/components/GidsLogo/GidsLogo.ts

@@ -28,6 +28,8 @@ export const GidsLogoDom = ({
   imgClasses,
   imgProps,
   imgHeight = '100',
+  invertedInDarkMode,
+  invertedInLightMode,
   ...restProps
 }: GidsLogoDomProps): HTMLAnchorElement => {
   const linkElement = document.createElement('a');
@@ -44,6 +46,10 @@ export const GidsLogoDom = ({
     const imgElement = document.createElement('img');
     imgElement.className = clsx(
       `gids-logo__img gids-logo__img-height-${imgHeight}`,
+      {
+        'gids-logo__inverted-img-in-dark': invertedInDarkMode,
+        'gids-logo__inverted-img-in-light': invertedInLightMode,
+      },
       imgClasses,
     );
     imgElement.setAttribute('src', src);

package/src/components/GidsScrim/GidsScrim.ts

@@ -0,0 +1,25 @@
+import {
+  type GidsScrimWebProps,
+  GidsScrimWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, type DomChildren } from '../../utils/domUtils.js';
+
+const { getGidsScrimClassNames } = GidsScrimWebUtils;
+
+export interface GidsScrimDomProps extends GidsScrimWebProps<DomChildren> {
+  extraClasses?: string;
+}
+
+export const GidsScrimDom = ({
+  children,
+  extraClasses,
+}: GidsScrimDomProps): HTMLElement => {
+  const scrimEl = document.createElement('gids-scrim');
+  scrimEl.className = getGidsScrimClassNames(extraClasses);
+
+  if (children) {
+    appendAsChildren(scrimEl, children);
+  }
+
+  return scrimEl;
+};

package/src/components/GidsSegmentedControl/GidsSegmentedControl.ts

@@ -6,14 +6,15 @@ import {
   type ClassValue,
   GidsSegmentedControlWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
-import { type DomNodeOrString } from '../../utils/domUtils.js';
+import { DomChildren, type DomNodeOrString } from '../../utils/domUtils.js';
 import { GidsSegmentedTabItemDom } from '../GidsSegmentedTabItem/GidsSegmentedTabItem.js';
 
 const { getGidsSegmentedControlClassNames } = GidsSegmentedControlWebUtils;
 
 export interface GidsSegmentedControlDomProps extends GidsSegmentedControlCommonProps<
   DomNodeOrString,
-  string
+  string,
+  DomChildren
 > {
   onPress?: (props: GidsSegmentedTabItemPressedReturnedProps) => void;
   className?: ClassValue;
@@ -24,6 +25,7 @@ export const GidsSegmentedControlDom = ({
   tabItems,
   onPress,
   className,
+  defaultSelectedIndex,
 }: GidsSegmentedControlDomProps): HTMLDivElement => {
   const segmentedControl = document.createElement('div');
   segmentedControl.className = getGidsSegmentedControlClassNames(
@@ -42,7 +44,7 @@ export const GidsSegmentedControlDom = ({
           // Determine if this tab is selected
           // Priority: 1. The newly clicked index, 2. The initial tabItem.selected state
 
-          let isSelected = false;
+          let isSelected = defaultSelectedIndex === index;
           if (selectedIndex !== undefined && selectedIndex !== null) {
             isSelected = index === selectedIndex;
           } else {

package/src/components/GidsSegmentedTabItem/GidsSegmentedTabItem.ts

@@ -7,20 +7,27 @@ import {
   GidsSegmentedTabItemWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
 import clsx from 'clsx';
-import { type DomNodeOrString } from '../../utils/domUtils.js';
+import {
+  appendAsChildren,
+  DomChildren,
+  type DomNodeOrString,
+} from '../../utils/domUtils.js';
 import { GidsBadgeDom } from '../GidsBadge/GidsBadge.js';
 
 const { getGidsSegmentedTabItemClassNames } = GidsSegmentedTabItemWebUtils;
 
 export interface GidsSegmentedTabItemDomProps extends GidsSegmentedTabItemCommonProps<
   DomNodeOrString,
-  string
+  string,
+  DomChildren
 > {
   onPress?: (props: GidsSegmentedTabItemPressedReturnedProps) => void;
   className?: ClassValue;
 }
 
 export const GidsSegmentedTabItemDom = ({
+  leadingIcon,
+  trailingIcon,
   index,
   label,
   selected = false,
@@ -32,8 +39,17 @@ export const GidsSegmentedTabItemDom = ({
   width = 'intrinsic',
 }: GidsSegmentedTabItemDomProps): HTMLButtonElement => {
   const segmentedTabItem = document.createElement('button');
+
+  let isIconOnly = false;
+  if (
+    (leadingIcon && !trailingIcon && (!label || label === '') && !badge) ||
+    (!leadingIcon && trailingIcon && (!label || label === '') && !badge)
+  ) {
+    isIconOnly = true;
+  }
+
   segmentedTabItem.className = getGidsSegmentedTabItemClassNames(
-    { selected, width },
+    { selected, width, isIconOnly },
     className,
   );
   segmentedTabItem.setAttribute('data-gids-segmented-item', 'true');
@@ -47,6 +63,15 @@ export const GidsSegmentedTabItemDom = ({
     }
   });
 
+  if (leadingIcon) {
+    const leadingIconContainer = document.createElement('div');
+    leadingIconContainer.className = clsx('gids-segmented-tab-item__icons', {
+      'gids-segmented-tab-item__selected-icons': selected,
+    });
+    appendAsChildren(leadingIconContainer, leadingIcon);
+    segmentedTabItem.appendChild(leadingIconContainer);
+  }
+
   if (label && label !== '') {
     if (typeof label === 'string') {
       const labelElement = document.createElement('label');
@@ -60,6 +85,15 @@ export const GidsSegmentedTabItemDom = ({
     }
   }
 
+  if (trailingIcon) {
+    const trailingIconContainer = document.createElement('div');
+    trailingIconContainer.className = clsx('gids-segmented-tab-item__icons', {
+      'gids-segmented-tab-item__selected-icons': selected,
+    });
+    appendAsChildren(trailingIconContainer, trailingIcon);
+    segmentedTabItem.appendChild(trailingIconContainer);
+  }
+
   if (badge) {
     segmentedTabItem.appendChild(
       GidsBadgeDom({

package/src/components/GidsSideMenu/GidsSideMenu.ts

@@ -0,0 +1,31 @@
+import {
+  GidsSideMenuWebProps,
+  GidsSideMenuWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils.js';
+
+const { getGidsSideMenuClassNames } = GidsSideMenuWebUtils;
+
+export interface GidsSideMenuDomProps extends GidsSideMenuWebProps<DomChildren> {
+  sideMenuExtraClasses?: string;
+}
+
+export const GidsSideMenuDom = ({
+  children,
+  sideMenuAppearance = 'default',
+  sideMenuExtraClasses,
+}: GidsSideMenuDomProps): HTMLDivElement => {
+  const sideMenu = document.createElement('div');
+  sideMenu.className = getGidsSideMenuClassNames(
+    { sideMenuAppearance },
+    sideMenuExtraClasses,
+  );
+
+  sideMenu.setAttribute('side-menu-appearance', sideMenuAppearance);
+
+  if (children) {
+    appendAsChildren(sideMenu, children);
+  }
+
+  return sideMenu;
+};

package/src/components/GidsSideMenuHeader/GidsSideMenuHeader.ts

@@ -0,0 +1,71 @@
+import {
+  GidsSideMenuHeaderWebProps,
+  GidsSideMenuHeaderWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { type HtmlInputAttributes } from '../GidsInput/GidsInput.js';
+import {
+  GidsSearchBarDom,
+  GidsSearchBarDomProps,
+} from '../GidsSearchBar/GidsSearchBar.js';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils.js';
+import { GidsDividerDom } from '../GidsDivider/GidsDivider.js';
+
+const { getGidsSideMenuHeaderClassNames } = GidsSideMenuHeaderWebUtils;
+
+export interface GidsSideMenuHeaderDomProps
+  extends
+    GidsSideMenuHeaderWebProps<DomChildren, Element, HtmlInputAttributes>,
+    Pick<
+      GidsSearchBarDomProps,
+      | 'wrapperClass'
+      | 'onGidsSearchBarClear'
+      | 'className'
+      | 'onBlur'
+      | 'onChange'
+      | 'onFocus'
+      | 'onInput'
+    > {
+  headerClasses?: string;
+}
+
+export const GidsSideMenuHeaderDom = ({
+  headerAppearance,
+  headerDividedByDivider = true,
+  customChildren,
+  searchVisible = true,
+  onGidsSearchBarClear,
+  headerClasses,
+  ...restProps
+}: GidsSideMenuHeaderDomProps) => {
+  const sideMenuHeader = document.createElement('div');
+  sideMenuHeader.className = getGidsSideMenuHeaderClassNames(
+    { headerAppearance },
+    headerClasses,
+  );
+
+  const sideMenuContentWrapper = document.createElement('div');
+  sideMenuContentWrapper.className = 'gids-side-menu-header__content-wrapper';
+
+  if (customChildren) {
+    appendAsChildren(sideMenuContentWrapper, customChildren);
+  }
+
+  if (searchVisible) {
+    const searchBarEl = document.createElement('div');
+    searchBarEl.className = 'gids-side-menu-header__search-bar';
+    searchBarEl.append(
+      GidsSearchBarDom({
+        ...restProps,
+        onGidsSearchBarClear: onGidsSearchBarClear,
+      }),
+    );
+    sideMenuContentWrapper.appendChild(searchBarEl);
+  }
+  sideMenuHeader.appendChild(sideMenuContentWrapper);
+
+  if (headerDividedByDivider) {
+    sideMenuHeader.append(GidsDividerDom({ orientation: 'horizontal' }));
+  }
+
+  return sideMenuHeader;
+};

package/src/components/GidsSideMenuItem/GidsSideMenuItem.ts

@@ -0,0 +1,108 @@
+import {
+  type GidsSideMenuItemOnPressEvent,
+  type GidsSideMenuItemWebProps,
+  GidsSideMenuItemWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+  appendAsChildren,
+  DomChildren,
+  DomNodeOrString,
+} from '../../utils/domUtils.js';
+import { GidsBadgeDom } from '../GidsBadge/GidsBadge.js';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
+import { GidsSideMenuItemCommonUtils } from '@ganpatiinfo/gids-core-shared';
+import { IconName } from '@ganpatiinfo/gids-web-theme-interface';
+
+const { getGidsSideMenuItemClassNames } = GidsSideMenuItemWebUtils;
+const { getSideMenuTrailingIcon } = GidsSideMenuItemCommonUtils;
+
+export interface GidsSideMenuItemDomProps extends GidsSideMenuItemWebProps<
+  DomNodeOrString,
+  DomChildren,
+  DomChildren
+> {
+  extraClasses?: string;
+  onPressSideMenuItem?: GidsSideMenuItemOnPressEvent;
+}
+
+export const GidsSideMenuItemDom = ({
+  appearance = 'default',
+  index = 0,
+  selected,
+  isLeadingDotVisible = false,
+  leadingDotAppearance = 'information',
+  leadingAccessory,
+  trailingAccessory,
+  leadingIcon,
+  trailingIcon,
+  isTrailingArrowVisible = false,
+  trailingArrowDirection = 'right',
+  children,
+  extraClasses,
+  onPressSideMenuItem,
+}: GidsSideMenuItemDomProps): HTMLDivElement => {
+  const sideMenuItem = document.createElement('div');
+  sideMenuItem.className = getGidsSideMenuItemClassNames(
+    { selected, appearance },
+    extraClasses,
+  );
+
+  sideMenuItem.setAttribute('index', `${index}`);
+
+  if (leadingAccessory) {
+    appendAsChildren(sideMenuItem, leadingAccessory);
+  } else {
+    if (isLeadingDotVisible) {
+      sideMenuItem.append(
+        GidsBadgeDom({
+          appearance: leadingDotAppearance,
+          type: 'dot',
+        }),
+      );
+    }
+  }
+
+  if (leadingIcon) {
+    appendAsChildren(sideMenuItem, leadingIcon);
+  }
+
+  if (children) {
+    const textEl = document.createElement('span');
+    textEl.className = 'gids-side-menu-item__label';
+    if (typeof children === 'string') {
+      textEl.textContent = children;
+    } else {
+      textEl.appendChild(children);
+    }
+    appendAsChildren(sideMenuItem, textEl);
+  }
+
+  if (trailingAccessory) {
+    appendAsChildren(sideMenuItem, trailingAccessory);
+  }
+
+  if (trailingIcon) {
+    appendAsChildren(sideMenuItem, trailingIcon);
+  } else {
+    if (isTrailingArrowVisible) {
+      sideMenuItem.append(
+        GidsIconDom({
+          name: getSideMenuTrailingIcon<IconName>(trailingArrowDirection),
+          size: 'md',
+          alt: '',
+          appearance: 'regular',
+        }),
+      );
+    }
+  }
+
+  if (onPressSideMenuItem) {
+    sideMenuItem.addEventListener('click', () => {
+      onPressSideMenuItem({
+        selectedIndex: index,
+      });
+    });
+  }
+
+  return sideMenuItem;
+};

package/src/components/GidsSideNavigation/GidsSideNavigation.ts

@@ -0,0 +1,97 @@
+import {
+  GidsSideNavigationWebProps,
+  GidsSideNavigationWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { DomChildren } from '../../utils/domUtils.js';
+import { HtmlInputAttributes } from '../GidsInput/GidsInput.js';
+import {
+  type GidsSideMenuHeaderDomProps,
+  GidsSideMenuHeaderDom,
+} from '../GidsSideMenuHeader/GidsSideMenuHeader.js';
+import { GidsSideMenuDom } from '../GidsSideMenu/GidsSideMenu.js';
+
+const { getGidsSideNavigationClassNames } = GidsSideNavigationWebUtils;
+
+export interface GidsSideNavigationDomProps
+  extends
+    GidsSideNavigationWebProps<
+      DomChildren,
+      DomChildren,
+      Element,
+      HtmlInputAttributes
+    >,
+    Pick<
+      GidsSideMenuHeaderDomProps,
+      | 'headerClasses'
+      | 'wrapperClass'
+      | 'onGidsSearchBarClear'
+      | 'className'
+      | 'onBlur'
+      | 'onChange'
+      | 'onFocus'
+      | 'onInput'
+    > {
+  extraSideNavigationClasses?: string;
+}
+
+export const GidsSideNavigationDom = ({
+  sideNavigationAppearance = 'default',
+  headerDividedByDivider = true,
+  headerClasses,
+  extraSideNavigationClasses,
+  customHeaderChildren,
+  isHeaderVisible = true,
+  searchVisible = true,
+  children,
+  onGidsSearchBarClear,
+  onBlur,
+  onChange,
+  onFocus,
+  onInput,
+  ...restProps
+}: GidsSideNavigationDomProps): HTMLElement => {
+  const sideNav = document.createElement('nav');
+
+  // FIX: Force set the physical HTML attributes so Stencil is forced to read them on boot
+  sideNav.setAttribute('side-navigation-appearance', sideNavigationAppearance);
+  sideNav.setAttribute('is-header-visible', String(isHeaderVisible));
+  sideNav.setAttribute('search-visible', String(searchVisible));
+  sideNav.setAttribute(
+    'header-divided-by-divider',
+    String(headerDividedByDivider),
+  );
+
+  sideNav.className = getGidsSideNavigationClassNames(
+    { sideNavigationAppearance },
+    extraSideNavigationClasses,
+  );
+
+  if (isHeaderVisible) {
+    sideNav.append(
+      GidsSideMenuHeaderDom({
+        searchVisible,
+        headerClasses,
+        headerAppearance: sideNavigationAppearance,
+        customChildren: customHeaderChildren,
+        onBlur,
+        onChange,
+        onFocus,
+        onInput,
+        onGidsSearchBarClear,
+        headerDividedByDivider,
+        ...restProps,
+      }),
+    );
+  }
+
+  if (children) {
+    sideNav.append(
+      GidsSideMenuDom({
+        children,
+        sideMenuAppearance: sideNavigationAppearance,
+      }),
+    );
+  }
+
+  return sideNav;
+};