@x15ventures/x15-ui-library 3.11.4

package/dist/esm/styles/variables/cssVars/_darkModeVariables.css

@@ -0,0 +1,287 @@
+/*
+  Dark theme providing all CSS custom properties and related styles for the x15Core dark theme. This replaces the previous :root-based approach to theming by allowing the variables to be scoped to a specific selector (for example, body.dark-theme, a theme wrapper, or the app root) instead of being applied globally. Include this mixin inside the selector that should receive the dark theme so that all dark-mode variables and styles remain encapsulated and easy to maintain. This is currently at proof of concept stage and will be subject to change.
+*/
+.dark {
+  --accordionBg: transparent;
+  --accordionBorder: 1px solid #1a1410;
+  --accordionFixedHeaderFgColor: #dddddd;
+  --accordionHeaderBg: #000000;
+  --accordionHeaderBorder: 1px solid #1a1410;
+  --accordionHeaderFg: #dddddd;
+  --accordionHeaderIconColor: #dddddd;
+  --accordionShadow: 0 0 5px 0 #2c211b;
+  --autocompleteOptionFg: #dbd7d5;
+  --autocompleteOptionHoverBg: #110d0b;
+  --autocompleteOptionHoverFg: #e7e5e4;
+  --autocompleteOptionSelectedBg: #1a1410;
+  --autocompleteOptionSelectedFg: #e7e5e4;
+  --autocompleteOptionsHolderBg: #090707;
+  --autocompleteOptionsHolderBorder: 1px solid #1a1410;
+  --bannerAlertBg: #0021fc;
+  --bannerAlertBgSecondary: rgb(0,20.6428571429,150);
+  --bannerAlertFgColor: #ffffff;
+  --bannerAlertSecondaryBorder: #0021fc;
+  --bannerBorderColor: transparent;
+  --bannerErrorBg: #44ffff;
+  --bannerErrorBgSecondary: #00aaaa;
+  --bannerErrorFgColor: #000000;
+  --bannerErrorFgSecondaryColor: #ffffff;
+  --bannerErrorSecondaryBorder: #44ffff;
+  --bannerHeaderFooterBorderColor: rgba(0,0,0,0.5);
+  --bannerInfoBg: #f6b24c;
+  --bannerInfoBgSecondary: rgb(161.9095744681,99, 0);
+  --bannerInfoFgColor: #000000;
+  --bannerInfoFgSecondaryColor: #ffffff;
+  --bannerInfoSecondaryBorder: #f6b24c;
+  --bannerSuccessBg: #ff7dbc;
+  --bannerSuccessBgSecondary: rgb(255,23, 136);
+  --bannerSuccessFgColor: #000000;
+  --bannerSuccessFgSecondaryColor: #ffffff;
+  --bannerSuccessSecondaryBorder: #ff7dbc;
+  --bannerWarnBg: #0a59dc;
+  --bannerWarnBgSecondary: rgb(7.6739130435,59,147.8260869565);
+  --bannerWarnFgColor: #ffffff;
+  --bannerWarnSecondaryBorder: #0a59dc;
+  --baseTextColor: #dddddd;
+  --baseTint: #000000;
+  --black: #ffffff;
+  --black-10: #f2f2f2;
+  --black-20: #e5e5e5;
+  --black-30: #d9d9d9;
+  --black-40: #cccccc;
+  --black-50: #bfbfbf;
+  --black-60: #b2b2b2;
+  --black-70: #a6a6a6;
+  --black-80: #999999;
+  --black-90: #8c8c8c;
+  --bodyBg: #000000;
+  --bodyFgColor: #dbd7d5;
+  --cardBorder: 1px solid #110d0b;
+  --cardBoxShadow: 0 0 5px 0 #110d0b;
+  --cardContentBg: #000000;
+  --cardContentFg: #dddddd;
+  --cardFooterBg: #000000;
+  --cardFooterBorder: 1px solid #2c211b;
+  --cardFooterBoxShadow: 0 -1px 5px 0 #110d0b;
+  --cardFooterFg: #dddddd;
+  --cardHeaderBg: #000000;
+  --cardHeaderBorder: 1px solid #2c211b;
+  --cardHeaderBoxShadow: 0 1px 3px 0 #110d0b;
+  --cardHeaderFg: #dddddd;
+  --cardHeaderIconColor: #dddddd;
+  --checkboxBg: #000000;
+  --checkboxBorderColor: #000000;
+  --checkboxFgColor: #000000;
+  --chipBlack: #dddddd;
+  --chipBlue: #009b00;
+  --chipBlueSoftBg: #25401b;
+  --chipBlueSoftBorder: #e1bf50;
+  --chipBlueSoftTxt: #e1bf50;
+  --chipBorder: 2px solid;
+  --chipDarkgrey: #aaaaaa;
+  --chipDarkgreySoftBg: #0c0b09;
+  --chipDarkgreySoftBorder: #c8b;
+  --chipDarkgreySoftTxt: #c8b;
+  --chipFontAdjust: 1em;
+  --chipGreen: #c59;
+  --chipGreenSoftBg: #2e05;
+  --chipGreenSoftBorder: #e9;
+  --chipGreenSoftTxt: #e9;
+  --chipLightgrey: #333333;
+  --chipLightgreySoftBg: #060505;
+  --chipLightgreySoftBorder: #94987f;
+  --chipLightgreySoftTxt: #94987f;
+  --chipOrange: #008cff;
+  --chipOrangeSoftBg: #00112a;
+  --chipOrangeSoftBorder: #3beff3;
+  --chipOrangeSoftTxt: #3beff3;
+  --chipPurple: #4ccb;
+  --chipPurpleSoftBg: #0c1710;
+  --chipPurpleSoftBorder: #94;
+  --chipPurpleSoftTxt: #94;
+  --chipRed: #11ffff;
+  --chipRedSoftBg: #011d1d;
+  --chipRedSoftBorder: #44e3e3;
+  --chipRedSoftTxt: #44e3e3;
+  --chipSquareBorderRadius: 5px;
+  --chipWhite: #000000;
+  --chipYellow: #003cff;
+  --chipYellowSoftBg: #01063c;
+  --chipYellowSoftBorder: #6db;
+  --chipYellowSoftTxt: #6db;
+  --dialogBg: #000000;
+  --dialogBorder: 1px solid #000000;
+  --dialogCloseButtonBg: #000000;
+  --dialogFooterShadow: none;
+  --dialogFg: #dddddd;
+  --dialogFocusOutline: 1px dotted #c7beb8;
+  --dialogHeaderBottomBorder: 1px solid #1a1410;
+  --dialogHeaderShadow: none;
+  --dialogOverlayColor: rgba(255,255,255,0.5);
+  --dialogShadow: 0 0 10px 0 #c7b;
+  --errorBg: #000000;
+  --errorFgColor: #33ff;
+  --globalDashboardLeftDivider: 1px solid #2c211b;
+  --globalDashboardLeftPanelBg: #090707;
+  --inputBgColor: #000000;
+  --inputLabelColor: #ffffff;
+  --inputBorder: 1px solid #8c8c8c;
+  --inputBorderColor: #8c8c8c;
+  --inputErrorBorder: 1px solid #33ffff;
+  --inputErrorBorderColor: #33ffff;
+  --inputErrorColor: #33ffff;
+  --inputFocusBorder: 1px solid #bfbfbf;
+  --inputFocusBorderColor: #bfbfbf;
+  --inputFocusColor: #f2f2f2;
+  --inputFocusOutline: 1px dotted #f2f2f2;
+  --inputReadonlyBgColor: #0d0d0d;
+  --inputReadonlyBorder: 1px solid #0d0d0d;
+  --inputReadonlyBorderColor: #0d0d0d;
+  --inputReadonlyColor: #bfbfbf;
+  --inputPlaceholderColor: #8c8c8c;
+  --inputValueColor: #d9d9d9;
+  --inverseTextColor: #000000;
+  --inverseTint: #ffffff;
+  --mainHeaderBg: #090707;
+  --mainHeaderBorderBottom: 1px solid #1a1410;
+  --mainHeaderBoxShadow: 0 3px 5px 0 #090707;
+  --mainHeaderFgColor: #dbd7d5;
+  --mandatorySymbolColor: #33ffff;
+  --menuActiveItemBg: #2c211b;
+  --neutral: #574436;
+  --neutral-10: #e7e5e4;
+  --neutral-20: #dbd7d5;
+  --neutral-30: #c7b;
+  --neutral-40: #aecb8d;
+  --neutral-50: #816858;
+  --neutral-60: #3d2f26;
+  --neutral-70: #2c211b;
+  --neutral-80: #1a1410;
+  --neutral-90: #110d0b;
+  --neutral-95: #090707;
+  --notificationIconBg: #33ffff;
+  --notificationIconBorder: 4px solid #33ffff;
+  --notificationIconFg: #000000;
+  --palette1: #1a1410;
+  --palette2: #3d2f26;
+  --popupMenuBg: #110d0b;
+  --popupMenuBorder: 1px solid #2c211b;
+  --popupMenuBoxShadow: 0 0 5px 0 #3d2f26;
+  --popupMenuButtonBg: #110d0b;
+  --popupMenuButtonBgHover: #2c211b;
+  --popupMenuButtonBorder: 1px solid #110d0b;
+  --popupMenuButtonBorderHover: 1px solid #2c211b;
+  --popupMenuButtonFgColor: #dbd7d5;
+  --popupMenuButtonFgColorHover: #e7e5e4;
+  --primaryButtonBg: #1a1410;
+  --primaryButtonBgHover: rgb(11,10,7);
+  --primaryButtonBorder: 1px solid #1a1410;
+  --primaryButtonDisabledBg: rgba(26,20,16,0.5);
+  --primaryButtonDisabledFgColor: rgba(221,221,221,0.5);
+  --primaryButtonFgColor: #dddddd;
+  --primaryButtonFgColorHover: #ffffff;
+  --primaryButtonFocusOutline: 1px solid #1a1410;
+  --primaryButtonInverseBg: #ffffff;
+  --primaryButtonInverseBgHover: #dddddd;
+  --primaryButtonInverseBorder: 1px solid #ffffff;
+  --primaryButtonInverseFgColor: #1a1410;
+  --primaryButtonInverseFgColorHover: #000000;
+  --primaryButtonInverseFocusOutline: 1px solid #5a;
+  --primaryButtonOutlineInvertStyleBorder: 1px solid #1a1410;
+  --primaryButtonOutlineInvertStyleFgColor: #1a1410;
+  --primaryButtonOutlineStyleBorder: 1px solid #1a1410;
+  --primaryButtonOutlineStyleFgColor: #fff;
+  --primaryTextOnlyColor: #ffffff;
+  --scrollBarBgColor: #090707;
+  --scrollBarFgColor: #816858;
+  --searchPanelDivider: 1px solid #2c211b;
+  --searchPanelMenuBg: #110d0b;
+  --searchPanelMenuBorder: 1px solid #2c211b;
+  --searchPanelMenuBoxShadow: 0 0 5px 0 #3d2f26;
+  --searchPanelMenuContentButtonBg: #110d0b;
+  --searchPanelMenuContentButtonBgHover: #2c211b;
+  --searchPanelMenuContentButtonBorder: 1px solid #110d0b;
+  --searchPanelMenuContentButtonBorderHover: 1px solid #2c211b;
+  --searchPanelMenuContentButtonFgColor: #dbd7d5;
+  --searchPanelMenuContentButtonFgColorHover: #e7e5e4;
+  --searchPanelMenuTriggerButtonBg: #1a1410;
+  --searchPanelMenuTriggerButtonBgHover: #2c211b;
+  --searchPanelMenuTriggerButtonBorder: 1px solid #1a1410;
+  --searchPanelMenuTriggerButtonBorderHover: 1px solid #2c211b;
+  --searchPanelMenuTriggerButtonFgColor: #dbd7d5;
+  --searchPanelMenuTriggerButtonFgColorHover: #e7e5e4;
+  --secondaryButtonBg: #3d2f26;
+  --secondaryButtonBgHover: rgb(46,35,29);
+  --secondaryButtonBorder: 1px solid #3d2f26;
+  --secondaryButtonDisabledBg: rgba(61,47,38,0.5);
+  --secondaryButtonDisabledFgColor: rgba(221,221,221,0.5);
+  --secondaryButtonFgColor: #dddddd;
+  --secondaryButtonFgColorHover: #ffffff;
+  --secondaryButtonFocusOutline: 1px solid #3d2f26;
+  --secondaryButtonInverseBg: #ffffff;
+  --secondaryButtonInverseBgHover: #dddddd;
+  --secondaryButtonInverseBorder: 1px solid #ffffff;
+  --secondaryButtonInverseFgColor: #3d2f26;
+  --secondaryButtonInverseFgColorHover: #000000;
+  --secondaryButtonInverseFocusOutline: 1px solid #3d2f26;
+  --secondaryTextOnlyColor: #ffffff;
+  --sidePanelBg: #000000;
+  --sidePanelBorder: 1px solid #110d0b;
+  --sidePanelCloseButtonBg: #000000;
+  --sidePanelCloseButtonBorder: 1px solid #110d0b;
+  --sidePanelCloseButtonFg: #dbd7d5;
+  --sidePanelCloseButtonShadow: 0 0 5px 0 #110d0b;
+  --sidePanelCloseIconColor: #dbd7d5;
+  --sidePanelFg: #dbd7d5;
+  --statusAlertColor: #000;
+  --statusDefCon3Bg: radial-gradient(circle at 60% 40%, #003, #000, #333); /* gradient stops inverted */
+  --statusDefCon3Color: #003;
+  --statusDefCon3LightBg: #003 radial-gradient(circle at 60% 40%, #003 0, #000 30%, #333);
+  --statusDefCon3ShadowColor: #33ffff;
+  --statusInfoColor: #666666;
+  --statusInfoLightBg: #333 radial-gradient(circle at 60% 40%, #000 0, #1a1410 30%, #333);
+  --statusSuccessColor: #f9c;
+  --statusSuccessLightBg: #f9c radial-gradient(circle at 60% 40%, #000 0, #fff, #f9c);
+  --statusWarnColor: #003;
+  --statusWarnLightBg: #003 radial-gradient(circle at 60% 40%, #000 0, #fff, #003);
+  --successBg: #ff5e8e;
+  --successFgColor: #000000;
+  --tabContentBorder: 1px solid #1a1410;
+  --tabContentBg: #000000;
+  --tabContentFgColor: #dbd7d5;
+  --tabControlActiveBg: #000000;
+  --tabControlActiveBorder: 1px solid #1a1410;
+  --tabControlActiveBottomBorder: 3px solid #000000;
+  --tabControlActiveFgColor: #dbd7d5;
+  --tabControlBg: #090707;
+  --tertiaryButtonBg: #c7b;
+  --tertiaryButtonBgHover: rgb(188,177,170);
+  --tertiaryButtonBorder: 1px solid #c7b;
+  --tertiaryButtonDisabledBg: rgba(199,190,184,0.5);
+  --tertiaryButtonDisabledFgColor: rgba(0,0,0,0.5);
+  --tertiaryButtonFgColor: #000000;
+  --tertiaryButtonInverseBg: rgb(86,74,68);
+  --tertiaryButtonInverseFgColor: #dddddd;
+  --tertiaryButtonOutlineStyleFgColor: #c7b;
+  --tertiaryTextOnlyColor: #c7b;
+  --textOnlyActiveFgColor: #e7e5e4;
+  --textOnlyColor: rgb(165,131,108);
+  --textOnlyFocusOutline: #ccc;
+  --textOnlyInverseColor: #000000;
+  --tooltipContentBg: #191919;
+  --tooltipContentFgColor: #dddddd;
+  --tooltipIconBg: #3d2f26;
+  --tooltipIconBorder: none;
+  --tooltipIconFgColor: #dddddd;
+  --tooltipSvgIconSize: 22px;
+  --white: #000000;
+  --white-10: #0d0d0d;
+  --white-20: #191919;
+  --white-30: #262626;
+  --white-40: #333333;
+  --white-50: #404040;
+  --white-60: #4c4c4c;
+  --white-70: #595959;
+  --white-80: #666666;
+  --white-90: #737373;
+}

package/dist/esm/styles/variables/cssVars/_designVariables.css

@@ -0,0 +1,219 @@
+:root {
+  --accordionWidth: 100%;
+  --accordionMargin: 0 0 20px;
+  --accordionShadow: 0 0 5px 0 #d3dee4;
+  --accordionPaddingCompact: 10px 10px;
+  --accordionPaddingRegular: 20px 20px;
+  --accordionPaddingSpacious: 30px 30px;
+  --accordionHeaderHeight: none;
+  --accordionHeaderFont: serif;
+  --accordionHeaderFontSize: 21px;
+  --accordionHeaderFontWeight: bold;
+  --accordionHeaderBg: #fff;
+  --accordionHeaderFg: #222;
+  --accordionHeaderBorder: 1px solid #e5ebef;
+  --accordionHeaderBorderRadius: 3px 3px 0 0;
+  --accordionHeaderBoxShadow: none;
+  --accordionHeaderIconColor: #222;
+  --accordionBg: transparent;
+  --accordionBorder: 1px solid #e5ebef;
+  --accordionBorderRadius: 5px;
+  --accordionFixedBorder: none;
+  --accordionFixedBorderRadius: 0;
+  --accordionFixedHeaderWidth: auto;
+  --accordionFixedHeaderHeight: auto;
+  --accordionFixedHeaderBg: none;
+  --accordionFixedHeaderFgColor: #222;
+  --accordionFixedHeaderBorder: none;
+  --accordionCustomHeaderPadding: 0 0 10px;
+  --accordionFooterMarginCompact: 0 -10px -10px;
+  --accordionFooterMarginRegular: 0 -20px -20px;
+  --accordionFooterMarginSpacious: 0 -30px -30px;
+  --accordionClosedContentPaddingCompact: 0 10px;
+  --accordionClosedContentPaddingRegular: 0 20px;
+  --accordionClosedContentPaddingSpacious: 0 30px;
+  --cardMinWidth: 450px;
+  --cardMaxWidth: 450px;
+  --cardMinWidthXSmall: 150px;
+  --cardMaxWidthXSmall: 150px;
+  --cardMinWidthSmall: 300px;
+  --cardMaxWidthSmall: 300px;
+  --cardMinWidthMedium: 450px;
+  --cardMaxWidthMedium: 450px;
+  --cardMinWidthLarge: 600px;
+  --cardMaxWidthLarge: 600px;
+  --cardMinWidthXLarge: 750px;
+  --cardMaxWidthXLarge: 750px;
+  --cardMinWidthAuto: auto;
+  --cardMaxWidthAuto: auto;
+  --cardBg: transparent;
+  --cardBorder: 1px solid #eef2f4;
+  --cardBorderRadius: 3px;
+  --cardBoxShadow: 0 0 5px 0 #eef2f4;
+  --cardMargin: 0 0 20px;
+  --cardContentPadding: 20px;
+  --cardHeaderPadding: 10px 20px;
+  --cardFooterPadding: 10px 20px;
+  --cardHeaderHeight: 60px;
+  --cardHeaderFont: serif;
+  --cardHeaderFontSize: 21px;
+  --cardHeaderFontWeight: bold;
+  --cardHeaderBg: #fff;
+  --cardHeaderFg: #222;
+  --cardHeaderBorder: 1px solid #d3dee4;
+  --cardHeaderBorderRadius: 3px 3px 0 0;
+  --cardHeaderBoxShadow: 0 1px 3px 0 #eef2f4;
+  --cardHeaderIconColor: #222;
+  --cardContentBg: #fff;
+  --cardContentFg: #222;
+  --cardFooterBg: #fff;
+  --cardFooterFg: #222;
+  --cardFooterBorder: 1px solid #d3dee4;
+  --cardFooterBorderRadius: 0 0 3px 3px;
+  --cardFooterBoxShadow: 0 -1px 5px 0 #eef2f4;
+  --chipFontAdjust: 1em;
+  --chipYellow: #fc0;
+  --chipOrange: #ff7300;
+  --chipRed: #e00;
+  --chipPurple: #b3d;
+  --chipBlue: #69f;
+  --chipGreen: #3a6;
+  --chipBlack: #222;
+  --chipWhite: #fff;
+  --chipDarkgrey: #555;
+  --chipLightgrey: #ccc;
+  --chipBorder: 2px solid;
+  --chipSquareBorderRadius: 5px;
+  --chipYellowSoftTxt: #92400E;
+  --chipYellowSoftBorder: #92400E;
+  --chipYellowSoftBg: #FEF9C3;
+  --chipOrangeSoftTxt: #C2410C;
+  --chipOrangeSoftBorder: #C2410C;
+  --chipOrangeSoftBg: #FFEDD5;
+  --chipRedSoftTxt: #B91C1C;
+  --chipRedSoftBorder: #B91C1C;
+  --chipRedSoftBg: #FEE2E2;
+  --chipPurpleSoftTxt: #6B21A8;
+  --chipPurpleSoftBorder: #6B21A8;
+  --chipPurpleSoftBg: #F3E8FF;
+  --chipBlueSoftTxt: #1E40AF;
+  --chipBlueSoftBorder: #1E40AF;
+  --chipBlueSoftBg: #DBEAFE;
+  --chipGreenSoftTxt: #166534;
+  --chipGreenSoftBorder: #166534;
+  --chipGreenSoftBg: #D1FAE5;
+  --chipDarkgreySoftTxt: #374151;
+  --chipDarkgreySoftBorder: #374151;
+  --chipDarkgreySoftBg: #F3F4F6;
+  --chipLightgreySoftTxt: #6B7280;
+  --chipLightgreySoftBorder: #6B7280;
+  --chipLightgreySoftBg: #F9FAFB;
+  --bannerErrorBg: #BB0000;
+  --bannerErrorFgColor: #fff;
+  --bannerSuccessBg: #008243;
+  --bannerSuccessFgColor: #fff;
+  --bannerAlertBg: #FFDE03;
+  --bannerAlertFgColor: #000;
+  --bannerInfoBg: #094DB3;
+  --bannerInfoFgColor: #fff;
+  --bannerWarnBg: #F5A623;
+  --bannerWarnFgColor: #000;
+  --bannerErrorBgSecondary: #ff5555;
+  --bannerErrorSecondaryBorder: #BB0000;
+  --bannerErrorFgSecondaryColor: #000;
+  --bannerSuccessBgSecondary: rgb(0, 232, 119.5692307692);
+  --bannerSuccessSecondaryBorder: #008243;
+  --bannerSuccessFgSecondaryColor: #000;
+  --bannerAlertBgSecondary: rgb(255, 235.3571428571, 105);
+  --bannerAlertSecondaryBorder: #FFDE03;
+  --bannerInfoBgSecondary: rgb(94.0904255319, 155.2180851064, 246.9095744681);
+  --bannerInfoSecondaryBorder: #094DB3;
+  --bannerInfoFgSecondaryColor: #000;
+  --bannerWarnBgSecondary: rgb(248.3260869565, 195.602173913, 108.1739130435);
+  --bannerWarnSecondaryBorder: #F5A623;
+  --bannerHeaderFooterBorderColor: rgba(255, 255, 255, 0.5);
+  --bannerStandardOffset: 20px;
+  --bannerIconSize: 24px;
+  --bannerPadding: 20px 40px 20px 80px;
+  --bannerBorderColor: transparent;
+  --bannerBorderRadius: 5px;
+  --bannerSectionDivider: 1px solid rgba(255, 255, 255, 0.5);
+  --bannerGrowOnHoverScale: 1.005;
+  --bannerWidthSm: 35vw;
+  --bannerWidthMd: 50vw;
+  --bannerWidthLg: 85vw;
+  --tooltipIconSize: 22px;
+  --tooltipSvgIconSize: 22px;
+  --tooltipWidth: 200px;
+  --tooltipWidthLarge: 320px;
+  --tooltipMargin: 0 5px;
+  --tooltipIconBg: #c2d0d9;
+  --tooltipIconBorder: none;
+  --tooltipIconFgColor: #222;
+  --tooltipContentBg: #e6e6e6;
+  --tooltipContentFgColor: #222;
+  --dialogOverlayColor: rgba(0, 0, 0, 0.5);
+  --dialogBg: #fff;
+  --dialogFg: #222;
+  --dialogBorder: 1px solid #fff;
+  --dialogBorderRadius: 3px;
+  --dialogShadow: 0 0 10px 0 #384147;
+  --dialogFocusOutline: 1px dotted #384147;
+  --dialogHeaderPadding: 20px 20px;
+  --dialogHeaderHeight: 50px;
+  --dialogHeaderBottomBorder: 1px solid #e5ebef;
+  --dialogHeaderShadow: none;
+  --dialogHeaderFont: serif;
+  --dialogHeaderFontSize: clamp(17px, 1vw + 0.5rem, 35px);
+  --dialogHeaderFontWeight: bold;
+  --dialogContentPadding: 20px;
+  --dialogContentFontSize: clamp(16px, 0.7vw + 0.5rem, 30px);
+  --dialogFooterPadding: 10px 20px;
+  --dialogFooterHeight: 50px;
+  --dialogFooterTopBorder: 1px solid #e5ebef;
+  --dialogFooterFontSize: clamp(16px, 0.7vw + 0.5rem, 30px);
+  --dialogFooterShadow: none;
+  --dialogCloseButtonBorder: none;
+  --dialogCloseButtonBg: #fff;
+  --dialogCloseButtonBg: #fff;
+  --dialogCloseButtonFg: none;
+  --dialogCloseButtonShadow: none;
+  --tabControlPadding: 20px;
+  --tabControlHeight: 50px;
+  --tabControlBorder: 1px solid #e5ebef;
+  --tabControlBottomBorder: 3px solid #516472;
+  --tabControlBorderRadius: 3px 3px 0 0;
+  --tabControlShadow: none;
+  --tabControlBg: #f6f8fa;
+  --tabControlFgColor: #24282b;
+  --tabControlActivePadding: 20px;
+  --tabControlActiveHeight: 50px;
+  --tabControlActiveBorder: 1px solid #e5ebef;
+  --tabControlActiveBottomBorder: 3px solid #fff;
+  --tabControlActiveBorderRadius: 3px 3px 0 0;
+  --tabControlActiveShadow: none;
+  --tabControlActiveBg: #fff;
+  --tabControlActiveFgColor: #24282b;
+  --tabContentPadding: 20px;
+  --tabContentBg: #fff;
+  --tabContentFgColor: #24282b;
+  --tabContentShadow: none;
+  --tabContentBorder: 1px solid #e5ebef;
+  --tabContentBorderRadius: 0 3px 3px 3px;
+  --statusDefCon3Color: #fc0;
+  --statusDefCon3Bg: radial-gradient(circle at 60% 40%, #fc0 0, #f00 30%, #c00);
+  --statusAlertColor: #f00;
+  --statusWarnColor: #fc0;
+  --statusInfoColor: #999;
+  --statusSuccessColor: #063;
+  --statusDefCon3LightBg: #fc0 radial-gradient(circle at 60% 40%, #fc0 0, #f00 30%, #c00);
+  --statusAlertLightBg: #c00 radial-gradient(circle at 60% 40%, #fff 0, #f00 30%, #c00);
+  --statusWarnLightBg: #fc0 radial-gradient(circle at 60% 40%, #fff 0, #fc0 30%, #fc0);
+  --statusInfoLightBg: #ccc radial-gradient(circle at 60% 40%, #fff 0, #e5ebef 30%, #ccc);
+  --statusSuccessLightBg: #063 radial-gradient(circle at 60% 40%, #fff 0, #096 30%, #063);
+  --statusDefCon3ShadowColor: #c00;
+  --notificationIconBg: #c00;
+  --notificationIconFg: #fff;
+  --notificationIconBorder: 4px solid #c00;
+  --notificationIconBoxShadow: none;
+}

package/dist/esm/styles/variables/cssVars/_formVariables.css

@@ -0,0 +1,60 @@
+:root {
+  --autocompleteBorderRadius: 5px;
+  --autocompleteOptionsHolderBg: #f6f8fa;
+  --autocompleteOptionsHolderBorder: 1px solid #e5ebef;
+  --autocompleteOptionsHolderBorderRadius: 3px;
+  --autocompleteOptionsHolderShadow: none;
+  --autocompleteOptionFg: #24282b;
+  --autocompleteOptionBg: none;
+  --autocompleteOptionBorder: none;
+  --autocompleteOptionBorderRadius: 3px;
+  --autocompleteOptionSpacing: 5px;
+  --autocompleteOptionHoverBg: #eef2f4;
+  --autocompleteOptionHoverFg: #181a1b;
+  --autocompleteOptionSelectedBg: #e5ebef;
+  --autocompleteOptionSelectedFg: #181a1b;
+  --inputTransition: none;
+  --inputHeight: 44px;
+  --inputPadding: 0 14px;
+  --inputBgColor: #fff;
+  --inputErrorBgColor: transparent;
+  --inputErrorColor: #c00;
+  --inputFocusBgColor: transparent;
+  --inputReadonlyBgColor: #f2f2f2;
+  --inputBorderThickness: 1px;
+  --inputErrorBorderThickness: 1px;
+  --inputFocusBorderThickness: 1px;
+  --inputReadonlyBorderThickness: 1px;
+  --inputReadonlyBorderColor: #f2f2f2;
+  --inputBorderRadius: 4px;
+  --inputBorderColor: #737373;
+  --inputErrorBorderColor: #c00;
+  --inputFocusBorderColor: #404040;
+  --inputPlaceholderColor: #737373;
+  --inputLabelColor: #262626;
+  --inputLabelFontSize: inherit;
+  --inputLabelFontWeight: inherit;
+  --inputLabelLineHeight: inherit;
+  --inputValueColor: #262626;
+  --inputReadonlyColor: #404040;
+  --inputFocusColor: #0d0d0d;
+  --inputFocusOutlineColor: #0d0d0d;
+  --inputFocusOutline: 1px dotted #0d0d0d;
+  --inputHoverOutline: 1px dotted;
+  --inputBorder: 1px solid #737373;
+  --inputErrorBorder: 1px solid #c00;
+  --inputReadonlyBorder: 1px solid #f2f2f2;
+  --inputFocusBorder: 1px solid #404040;
+  --mandatorySymbolColor: #c00;
+  --mandatorySymbolContent: '*';
+  --mandatorySymbolDecoration: none;
+  --mandatorySymbolUnderlineOffset: 0;
+  --checkboxBorderColor: ECF0F3;
+  --checkboxBg: #fff;
+  --checkboxFgColor: ECF0F3;
+  --checkboxIconSize: 20px;
+  --successBg: #00A171;
+  --successFgColor: #fff;
+  --errorFgColor: #c00;
+  --errorBg: #fff;
+}

package/dist/esm/styles/variables/cssVars/_layoutVariables.css

@@ -0,0 +1,37 @@
+:root {
+  --bodyBg: #fff;
+  --bodyFgColor: #24282b;
+  --bodyFont: sans-serif;
+  --headingFont: serif;
+  --scrollBarFgColor: #7e97a7;
+  --scrollBarBgColor: #f6f8fa;
+  --pageContainerMaxWidth: 1100px;
+  --mainContentPadding: 20px 30px;
+  --mainContentBg: none;
+  --mainContentFgColor: #24282b;
+  --defaultSpacing: 20px;
+  --compactSpacing: 10px;
+  --wideSpacing: 40px;
+  --mainHeaderHeight: 60px;
+  --mainHeaderBg: #f6f8fa;
+  --mainHeaderFgColor: #24282b;
+  --mainHeaderPadding: 0 20px;
+  --mainHeaderBorder: none;
+  --mainHeaderBorderBottom: 1px solid #e5ebef;
+  --mainHeaderBoxShadow: 0 3px 5px 0 #f6f8fa;
+  --sidePanelBg: #fff;
+  --sidePanelFg: #24282b;
+  --sidePanelBorder: 1px solid #eef2f4;
+  --sidePanelPadding: 20px;
+  --sidePanelShadow: none;
+  --sidePanelCloseButtonBg: #fff;
+  --sidePanelCloseButtonFg: #24282b;
+  --sidePanelCloseButtonBorder: 1px solid #eef2f4;
+  --sidePanelCloseButtonShadow: 0 0 5px 0 #eef2f4;
+  --sidePanelCloseIconColor: #24282b;
+  --sidePanelSizeSmall: 44px;
+  --sidePanelSizeMedium: 300px;
+  --sidePanelSizeLarge: 420px;
+  --globalDashboardLeftPanelBg: #f6f8fa;
+  --globalDashboardLeftDivider: 1px solid #d3dee4;
+}

package/dist/esm/styles/variables/cssVars/_navigationVariables.css

@@ -0,0 +1,44 @@
+:root {
+  --searchPanelMenuBg: #eef2f4;
+  --searchPanelMenuBorder: 1px solid #d3dee4;
+  --searchPanelMenuBorderRadius: 3px;
+  --searchPanelMenuBoxShadow: 0 0 5px 0 #c2d0d9;
+  --searchPanelDivider: 1px solid #d3dee4;
+  --searchPanelMenuContentWidth: 280px;
+  --searchPanelMenuContentHeight: 350px;
+  --searchPanelMenuTriggerButtonBg: #e5ebef;
+  --searchPanelMenuTriggerButtonBorder: 1px solid #e5ebef;
+  --searchPanelMenuTriggerButtonFgColor: #24282b;
+  --searchPanelMenuTriggerButtonBgHover: #d3dee4;
+  --searchPanelMenuTriggerButtonFgColorHover: #181a1b;
+  --searchPanelMenuTriggerButtonBorderHover: 1px solid #d3dee4;
+  --searchPanelMenuContentButtonBg: #eef2f4;
+  --searchPanelMenuContentButtonBorder: 1px solid #eef2f4;
+  --searchPanelMenuContentButtonFgColor: #24282b;
+  --searchPanelMenuContentButtonBgHover: #d3dee4;
+  --searchPanelMenuContentButtonFgColorHover: #181a1b;
+  --searchPanelMenuContentButtonBorderHover: 1px solid #d3dee4;
+  --popupMenuBg: #eef2f4;
+  --popupMenuBorder: 1px solid #d3dee4;
+  --popupMenuBorderRadius: 3px;
+  --popupMenuBoxShadow: 0 0 5px 0 #c2d0d9;
+  --popupMenuWidth: 280px;
+  --popupMenuMaxHeight: 350px;
+  --popupMenuButtonBg: #eef2f4;
+  --popupMenuButtonBorder: 1px solid #eef2f4;
+  --popupMenuButtonFgColor: #24282b;
+  --popupMenuButtonBgHover: #d3dee4;
+  --popupMenuButtonFgColorHover: #181a1b;
+  --popupMenuButtonBorderHover: 1px solid #d3dee4;
+  --menuWidth: 100%;
+  --menuPopSubmenusWidth: 280px;
+  --menuPopSubmenusGap: 20px;
+  --menuLeftPaddingLvl2: 20px;
+  --menuLeftPaddingLvl3: 40px;
+  --menuButtonPadding: 0 10px;
+  --menuButtonBorderRadius: 0px;
+  --menuButtonBg: transparent;
+  --menuButtonBorder: none;
+  --menuActiveItemBg: #d3dee4;
+  --menuActiveItemBorderRadius: 3px;
+}

package/dist/esm/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "extends": "../tsconfig.lib.json",
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    
+    "noEmit": true,
+    "emitDeclarationOnly": false,
+    "declaration": false,
+    "declarationMap": false,
+    
+    "resolveJsonModule": true,
+    "resolvePackageJsonExports": true,
+    "resolvePackageJsonImports": true,
+    
+    "types": ["node"]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.json",
+    "src/**/*.mdx",
+    "config/storybook/web/*.ts",
+    "config/storybook/web/*.tsx",
+    "src/**/*.stories.ts",
+    "src/**/*.stories.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "reports"
+  ]
+}

package/dist/exampleUIs/demoDashboard/DemoDashboard.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+/**
+ * DemonstrationUI
+ *
+ * This file represents a canonical page-level composition example.
+ * It demonstrates how layout templates, navigation, headers, content,
+ * forms, and disclosure components are composed together.
+ *
+ * This should be treated as a reference implementation for screen composition.
+ */
+export declare const DemoDashboard: React.FC<{
+    theme?: string;
+}>;
+export default DemoDashboard;
+//# sourceMappingURL=DemoDashboard.d.ts.map

package/dist/exampleUIs/demoDashboard/DemoDashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoDashboard.d.ts","sourceRoot":"","sources":["../../../src/exampleUIs/demoDashboard/DemoDashboard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAaxC;;;;;;;;GAQG;AAEH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;CAAE,CAwDvD,CAAC;AAEF,eAAe,aAAa,CAAC"}