Merge branch 'develop' of https://gitlab.verizon.com/BPHV_MIPS/vds_ios_sample into vasavk/listUnordered

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>

VDS.xcworkspace/contents.xcworkspacedata

@@ -1,6 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Workspace
    version = "1.0">
+   <FileRef
+      location = "group:workspaceSettings.xcconfig">
+   </FileRef>
    <FileRef
       location = "container:VDSSample.xcodeproj">
    </FileRef>

VDSSample.xcodeproj/project.pbxproj

@@ -32,10 +32,18 @@
 /* End PBXAggregateTarget section */
 
 /* Begin PBXBuildFile section */
+		180636CB2C29B12B00C92D86 /* InputStepperViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 180636CA2C29B12B00C92D86 /* InputStepperViewController.swift */; };
 		1808BEBE2BA4479500129230 /* CarouselScrollbarViewConttroller.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1808BEBD2BA4479500129230 /* CarouselScrollbarViewConttroller.swift */; };
 		1832AC5B2BA1347B008AE476 /* BreadcrumbsViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1832AC5A2BA1347B008AE476 /* BreadcrumbsViewController.swift */; };
+		183B16F52C80B27C00BA6A10 /* FootnoteGroupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 183B16F42C80B27C00BA6A10 /* FootnoteGroupViewController.swift */; };
+		184023492C61E9E700A412C8 /* PriceLockupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 184023482C61E9E700A412C8 /* PriceLockupViewController.swift */; };
+		1859B3152CBF77B30031CD70 /* ListUnorderedViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1859B3142CBF77B30031CD70 /* ListUnorderedViewController.swift */; };
 		186D13CD2BBA990800986B53 /* DropdownSelectViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 186D13CC2BBA990800986B53 /* DropdownSelectViewController.swift */; };
+		18926F5F2C76185A00C55BF6 /* FootnoteItemViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18926F5E2C76185A00C55BF6 /* FootnoteItemViewController.swift */; };
 		18A3F1302BD9332500498E4A /* CalendarViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18A3F12F2BD9332500498E4A /* CalendarViewController.swift */; };
+		18AE87522C06FDD60075F181 /* CarouselViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18AE87512C06FDD60075F181 /* CarouselViewController.swift */; };
+		18C0F9482C98177F00E1DD71 /* ModalViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18C0F9472C98177F00E1DD71 /* ModalViewController.swift */; };
+		440B84CC2BD8E98B004A732A /* TableViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 440B84CB2BD8E98B004A732A /* TableViewController.swift */; };
 		445BA07A29C088470036A7C5 /* NotificationViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 445BA07929C088470036A7C5 /* NotificationViewController.swift */; };
 		44604AD929CE1CF900E62B51 /* LineViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 44604AD829CE1CF900E62B51 /* LineViewController.swift */; };
 		5FC35BE928D5235A004EBEAC /* ButtonViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5FC35BE828D5235A004EBEAC /* ButtonViewController.swift */; };
@@ -44,8 +52,7 @@
 		EA0D1C312A673F3500E5C127 /* RadioButtonViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA0D1C302A673F3500E5C127 /* RadioButtonViewController.swift */; };
 		EA0D1C332A673FD400E5C127 /* RadioButtonItemViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA0D1C322A673FD400E5C127 /* RadioButtonItemViewController.swift */; };
 		EA0FC2C12912DC5500DF80B4 /* TextLinkCaretViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA0FC2C02912DC5500DF80B4 /* TextLinkCaretViewController.swift */; };
-		EA21C5D82B600E4200CFC139 /* VDSTokens.xcframework in Frameworks */ = {isa = PBXBuildFile; fileRef = EA21C5D72B600E4200CFC139 /* VDSTokens.xcframework */; };
-		EA21C5D92B600E4200CFC139 /* VDSTokens.xcframework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = EA21C5D72B600E4200CFC139 /* VDSTokens.xcframework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
+		EA1758462BC8893700A5C0D9 /* DatePickerViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA1758452BC8893700A5C0D9 /* DatePickerViewController.swift */; };
 		EA297A682A02F5320031ED56 /* TableViewTestController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA297A672A02F5320031ED56 /* TableViewTestController.swift */; };
 		EA3C3B9D289966EF000CA526 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA3C3B9C289966EF000CA526 /* AppDelegate.swift */; };
 		EA3C3B9F289966EF000CA526 /* SceneDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA3C3B9E289966EF000CA526 /* SceneDelegate.swift */; };
@@ -87,6 +94,8 @@
 		EAB2376C29E9E74900AABE9A /* TrailingTooltipLabelViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAB2376B29E9E74900AABE9A /* TrailingTooltipLabelViewController.swift */; };
 		EAB5FEEF2927E28400998C17 /* ButtonGroupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAB5FEEE2927E28400998C17 /* ButtonGroupViewController.swift */; };
 		EAB5FEF32928153D00998C17 /* Helper.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAB5FEF22928153D00998C17 /* Helper.swift */; };
+		EAC58BFF2BEAB4F500BA39FA /* VDSCoreTokens.xcframework in Frameworks */ = {isa = PBXBuildFile; fileRef = EAC58BFE2BEAB4F500BA39FA /* VDSCoreTokens.xcframework */; };
+		EAC58C002BEAB4F500BA39FA /* VDSCoreTokens.xcframework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = EAC58BFE2BEAB4F500BA39FA /* VDSCoreTokens.xcframework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
 		EAC9258029119FC400091998 /* TextLinkViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAC9257F29119FC400091998 /* TextLinkViewController.swift */; };
 		EAD062A32A3913920015965D /* DropShawdowViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAD062A22A3913920015965D /* DropShawdowViewController.swift */; };
 		EAD062A52A3B5CDF0015965D /* Slider.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAD062A42A3B5CDF0015965D /* Slider.swift */; };
@@ -99,6 +108,7 @@
 		EAF7F0CC289DA24F00B287F5 /* DownloadArtifactoryItems.sh in Resources */ = {isa = PBXBuildFile; fileRef = EAF7F0C8289DA24F00B287F5 /* DownloadArtifactoryItems.sh */; };
 		EAF7F0CD289DA24F00B287F5 /* Artifactory.sh in Resources */ = {isa = PBXBuildFile; fileRef = EAF7F0C9289DA24F00B287F5 /* Artifactory.sh */; };
 		EAF7F11A28A14A0E00B287F5 /* RadioButtonGroupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAF7F11928A14A0E00B287F5 /* RadioButtonGroupViewController.swift */; };
+		EAFD5A9D2CB4609900C87DE1 /* TokenColorPickerFormSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAFD5A9C2CB4609900C87DE1 /* TokenColorPickerFormSection.swift */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXCopyFilesBuildPhase section */
@@ -108,8 +118,8 @@
 			dstPath = "";
 			dstSubfolderSpec = 10;
 			files = (
+				EAC58C002BEAB4F500BA39FA /* VDSCoreTokens.xcframework in Embed Frameworks */,
 				EA978EC3291AC62200ACC883 /* VDS.framework in Embed Frameworks */,
-				EA21C5D92B600E4200CFC139 /* VDSTokens.xcframework in Embed Frameworks */,
 			);
 			name = "Embed Frameworks";
 			runOnlyForDeploymentPostprocessing = 0;
@@ -127,10 +137,18 @@
 /* End PBXCopyFilesBuildPhase section */
 
 /* Begin PBXFileReference section */
+		180636CA2C29B12B00C92D86 /* InputStepperViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InputStepperViewController.swift; sourceTree = "<group>"; };
 		1808BEBD2BA4479500129230 /* CarouselScrollbarViewConttroller.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CarouselScrollbarViewConttroller.swift; sourceTree = "<group>"; };
 		1832AC5A2BA1347B008AE476 /* BreadcrumbsViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BreadcrumbsViewController.swift; sourceTree = "<group>"; };
+		183B16F42C80B27C00BA6A10 /* FootnoteGroupViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FootnoteGroupViewController.swift; sourceTree = "<group>"; };
+		184023482C61E9E700A412C8 /* PriceLockupViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PriceLockupViewController.swift; sourceTree = "<group>"; };
+		1859B3142CBF77B30031CD70 /* ListUnorderedViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ListUnorderedViewController.swift; sourceTree = "<group>"; };
 		186D13CC2BBA990800986B53 /* DropdownSelectViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DropdownSelectViewController.swift; sourceTree = "<group>"; };
+		18926F5E2C76185A00C55BF6 /* FootnoteItemViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FootnoteItemViewController.swift; sourceTree = "<group>"; };
 		18A3F12F2BD9332500498E4A /* CalendarViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CalendarViewController.swift; sourceTree = "<group>"; };
+		18AE87512C06FDD60075F181 /* CarouselViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CarouselViewController.swift; sourceTree = "<group>"; };
+		18C0F9472C98177F00E1DD71 /* ModalViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ModalViewController.swift; sourceTree = "<group>"; };
+		440B84CB2BD8E98B004A732A /* TableViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TableViewController.swift; sourceTree = "<group>"; };
 		445BA07929C088470036A7C5 /* NotificationViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NotificationViewController.swift; sourceTree = "<group>"; };
 		44604AD829CE1CF900E62B51 /* LineViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LineViewController.swift; sourceTree = "<group>"; };
 		5FC35BE828D5235A004EBEAC /* ButtonViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ButtonViewController.swift; sourceTree = "<group>"; };
@@ -139,6 +157,7 @@
 		EA0D1C302A673F3500E5C127 /* RadioButtonViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RadioButtonViewController.swift; sourceTree = "<group>"; };
 		EA0D1C322A673FD400E5C127 /* RadioButtonItemViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RadioButtonItemViewController.swift; sourceTree = "<group>"; };
 		EA0FC2C02912DC5500DF80B4 /* TextLinkCaretViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TextLinkCaretViewController.swift; sourceTree = "<group>"; };
+		EA1758452BC8893700A5C0D9 /* DatePickerViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DatePickerViewController.swift; sourceTree = "<group>"; };
 		EA21C5D72B600E4200CFC139 /* VDSTokens.xcframework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.xcframework; name = VDSTokens.xcframework; path = SharedFrameworks/VDSTokens.xcframework; sourceTree = "<group>"; };
 		EA297A672A02F5320031ED56 /* TableViewTestController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TableViewTestController.swift; sourceTree = "<group>"; };
 		EA3C3B99289966EF000CA526 /* VDSSample.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = VDSSample.app; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -159,6 +178,8 @@
 		EA5E305B295111050082B959 /* TileletViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TileletViewController.swift; sourceTree = "<group>"; };
 		EA5F86CD2A1E863F00BC83E4 /* TabsContainerViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TabsContainerViewController.swift; sourceTree = "<group>"; };
 		EA6642962BD1B2E700D81DC4 /* ColorPickerView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ColorPickerView.swift; sourceTree = "<group>"; };
+		EA78C7A42C0E64A800430AD1 /* vds-sample-dev.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = "vds-sample-dev.xcconfig"; sourceTree = "<group>"; };
+		EA78C7A52C0E64CC00430AD1 /* vds-sample.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = "vds-sample.xcconfig"; sourceTree = "<group>"; };
 		EA81410D2A0ED8DC004F60D2 /* ButtonIconViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ButtonIconViewController.swift; sourceTree = "<group>"; };
 		EA89201828B56DF5006B9984 /* RadioBoxGroupViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RadioBoxGroupViewController.swift; sourceTree = "<group>"; };
 		EA89203F28B66CE2006B9984 /* ScrollViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ScrollViewController.swift; sourceTree = "<group>"; };
@@ -182,6 +203,7 @@
 		EAB2376B29E9E74900AABE9A /* TrailingTooltipLabelViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TrailingTooltipLabelViewController.swift; sourceTree = "<group>"; };
 		EAB5FEEE2927E28400998C17 /* ButtonGroupViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ButtonGroupViewController.swift; sourceTree = "<group>"; };
 		EAB5FEF22928153D00998C17 /* Helper.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Helper.swift; sourceTree = "<group>"; };
+		EAC58BFE2BEAB4F500BA39FA /* VDSCoreTokens.xcframework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.xcframework; name = VDSCoreTokens.xcframework; path = SharedFrameworks/VDSCoreTokens.xcframework; sourceTree = "<group>"; };
 		EAC9257F29119FC400091998 /* TextLinkViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TextLinkViewController.swift; sourceTree = "<group>"; };
 		EAD062A22A3913920015965D /* DropShawdowViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DropShawdowViewController.swift; sourceTree = "<group>"; };
 		EAD062A42A3B5CDF0015965D /* Slider.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Slider.swift; sourceTree = "<group>"; };
@@ -194,6 +216,7 @@
 		EAF7F0C8289DA24F00B287F5 /* DownloadArtifactoryItems.sh */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.script.sh; path = DownloadArtifactoryItems.sh; sourceTree = "<group>"; };
 		EAF7F0C9289DA24F00B287F5 /* Artifactory.sh */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.script.sh; path = Artifactory.sh; sourceTree = "<group>"; };
 		EAF7F11928A14A0E00B287F5 /* RadioButtonGroupViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RadioButtonGroupViewController.swift; sourceTree = "<group>"; };
+		EAFD5A9C2CB4609900C87DE1 /* TokenColorPickerFormSection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TokenColorPickerFormSection.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -201,8 +224,8 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				EAC58BFF2BEAB4F500BA39FA /* VDSCoreTokens.xcframework in Frameworks */,
 				EA978EC2291AC62200ACC883 /* VDS.framework in Frameworks */,
-				EA21C5D82B600E4200CFC139 /* VDSTokens.xcframework in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -244,6 +267,7 @@
 		EA3C3BB8289968A0000CA526 /* Frameworks */ = {
 			isa = PBXGroup;
 			children = (
+				EAC58BFE2BEAB4F500BA39FA /* VDSCoreTokens.xcframework */,
 				EA21C5D72B600E4200CFC139 /* VDSTokens.xcframework */,
 				EA978EC1291AC62200ACC883 /* VDS.framework */,
 			);
@@ -271,6 +295,7 @@
 				EAB5FEF22928153D00998C17 /* Helper.swift */,
 				EAD062A42A3B5CDF0015965D /* Slider.swift */,
 				EA89205028B68307006B9984 /* TextField.swift */,
+				EAFD5A9C2CB4609900C87DE1 /* TokenColorPickerFormSection.swift */,
 			);
 			path = Classes;
 			sourceTree = "<group>";
@@ -320,27 +345,36 @@
 				EA81410D2A0ED8DC004F60D2 /* ButtonIconViewController.swift */,
 				5FC35BE828D5235A004EBEAC /* ButtonViewController.swift */,
 				18A3F12F2BD9332500498E4A /* CalendarViewController.swift */,
+				18AE87512C06FDD60075F181 /* CarouselViewController.swift */,
 				1808BEBD2BA4479500129230 /* CarouselScrollbarViewConttroller.swift */,
 				EA89204D28B67332006B9984 /* CheckBoxGroupViewController.swift */,
 				EAF7F09B2899B92400B287F5 /* CheckboxItemViewController.swift */,
 				EA0D1C2E2A66CFE900E5C127 /* CheckboxViewController.swift */,
+				EA1758452BC8893700A5C0D9 /* DatePickerViewController.swift */,
 				186D13CC2BBA990800986B53 /* DropdownSelectViewController.swift */,
+				18926F5E2C76185A00C55BF6 /* FootnoteItemViewController.swift */,
+				183B16F42C80B27C00BA6A10 /* FootnoteGroupViewController.swift */,
 				EA985C00296CC21C00F2FF2E /* IconViewController.swift */,
 				EAA5EEAC28EB6924003B3210 /* InputFieldViewController.swift */,
+				180636CA2C29B12B00C92D86 /* InputStepperViewController.swift */,
 				EAB1D2D328AC409F00DAE764 /* LabelViewController.swift */,
 				44604AD829CE1CF900E62B51 /* LineViewController.swift */,
+				1859B3142CBF77B30031CD70 /* ListUnorderedViewController.swift */,
 				EAD0688F2A55FC11002E3A2D /* LoaderViewController.swift */,
+				18C0F9472C98177F00E1DD71 /* ModalViewController.swift */,
 				445BA07929C088470036A7C5 /* NotificationViewController.swift */,
 				71B23C302B921D730027F7D9 /* PaginationViewController.swift */,
+				184023482C61E9E700A412C8 /* PriceLockupViewController.swift */,
 				EA89201828B56DF5006B9984 /* RadioBoxGroupViewController.swift */,
 				EAF7F11928A14A0E00B287F5 /* RadioButtonGroupViewController.swift */,
 				EA0D1C322A673FD400E5C127 /* RadioButtonItemViewController.swift */,
 				EA0D1C302A673F3500E5C127 /* RadioButtonViewController.swift */,
+				440B84CB2BD8E98B004A732A /* TableViewController.swift */,
 				EA5F86CD2A1E863F00BC83E4 /* TabsContainerViewController.swift */,
 				EA596AB92A16B2ED00300C4B /* TabsViewController.swift */,
 				EA985C24296E06EA00F2FF2E /* TextAreaViewController.swift */,
-				EA0FC2C02912DC5500DF80B4 /* TextLinkCaretViewController.swift */,
 				EAC9257F29119FC400091998 /* TextLinkViewController.swift */,
+				EA0FC2C02912DC5500DF80B4 /* TextLinkCaretViewController.swift */,
 				EA5E304F294D11540082B959 /* TileContainerViewController.swift */,
 				EA5E305B295111050082B959 /* TileletViewController.swift */,
 				EA5E30542950EA6E0082B959 /* TitleLockupViewController.swift */,
@@ -356,6 +390,8 @@
 			children = (
 				EAF7F0C4289DA24F00B287F5 /* Artifactory */,
 				EAF7F0792899698800B287F5 /* Resources */,
+				EA78C7A42C0E64A800430AD1 /* vds-sample-dev.xcconfig */,
+				EA78C7A52C0E64CC00430AD1 /* vds-sample.xcconfig */,
 			);
 			path = "Supporting Files";
 			sourceTree = "<group>";
@@ -518,14 +554,19 @@
 				EA3C3BB428996775000CA526 /* PickerBase.swift in Sources */,
 				EAB2376C29E9E74900AABE9A /* TrailingTooltipLabelViewController.swift in Sources */,
 				EAB1D2C928AAAA1D00DAE764 /* BaseViewController.swift in Sources */,
+				EA1758462BC8893700A5C0D9 /* DatePickerViewController.swift in Sources */,
+				180636CB2C29B12B00C92D86 /* InputStepperViewController.swift in Sources */,
 				EAD062AD2A3B86950015965D /* BadgeIndicatorViewController.swift in Sources */,
 				EA5E305C295111050082B959 /* TileletViewController.swift in Sources */,
 				EAD062A32A3913920015965D /* DropShawdowViewController.swift in Sources */,
 				EA6642972BD1B2E700D81DC4 /* ColorPickerView.swift in Sources */,
 				EA0D1C312A673F3500E5C127 /* RadioButtonViewController.swift in Sources */,
+				EAFD5A9D2CB4609900C87DE1 /* TokenColorPickerFormSection.swift in Sources */,
 				EAB5FEF32928153D00998C17 /* Helper.swift in Sources */,
 				EA89204728B66CE2006B9984 /* KeyboardFrameChangeListener.swift in Sources */,
 				EA4DB30428DCD25B00103EE3 /* BadgeViewController.swift in Sources */,
+				1859B3152CBF77B30031CD70 /* ListUnorderedViewController.swift in Sources */,
+				18C0F9482C98177F00E1DD71 /* ModalViewController.swift in Sources */,
 				EAB2376029E88D5D00AABE9A /* TooltipViewController.swift in Sources */,
 				EA89204828B66CE2006B9984 /* ScrollViewKeyboardAvoiding.swift in Sources */,
 				EA0FC2C12912DC5500DF80B4 /* TextLinkCaretViewController.swift in Sources */,
@@ -533,16 +574,21 @@
 				EAF7F09C2899B92400B287F5 /* CheckboxItemViewController.swift in Sources */,
 				EA0D1C2F2A66CFE900E5C127 /* CheckboxViewController.swift in Sources */,
 				18A3F1302BD9332500498E4A /* CalendarViewController.swift in Sources */,
+				18AE87522C06FDD60075F181 /* CarouselViewController.swift in Sources */,
 				EA596ABA2A16B2ED00300C4B /* TabsViewController.swift in Sources */,
 				EA89204E28B67332006B9984 /* CheckBoxGroupViewController.swift in Sources */,
+				183B16F52C80B27C00BA6A10 /* FootnoteGroupViewController.swift in Sources */,
 				EAA5EEAD28EB6924003B3210 /* InputFieldViewController.swift in Sources */,
+				440B84CC2BD8E98B004A732A /* TableViewController.swift in Sources */,
 				EA985C25296E06EA00F2FF2E /* TextAreaViewController.swift in Sources */,
 				1832AC5B2BA1347B008AE476 /* BreadcrumbsViewController.swift in Sources */,
 				EA81410E2A0ED8DC004F60D2 /* ButtonIconViewController.swift in Sources */,
 				EA985C20296DECF600F2FF2E /* IconName.swift in Sources */,
 				EA89204928B66CE2006B9984 /* KeyboardFrameChangeListening.swift in Sources */,
 				EA5F86CE2A1E863F00BC83E4 /* TabsContainerViewController.swift in Sources */,
+				18926F5F2C76185A00C55BF6 /* FootnoteItemViewController.swift in Sources */,
 				EA985C01296CC21C00F2FF2E /* IconViewController.swift in Sources */,
+				184023492C61E9E700A412C8 /* PriceLockupViewController.swift in Sources */,
 				EAC9258029119FC400091998 /* TextLinkViewController.swift in Sources */,
 				EAD068902A55FC11002E3A2D /* LoaderViewController.swift in Sources */,
 				EAD062A52A3B5CDF0015965D /* Slider.swift in Sources */,
@@ -575,6 +621,7 @@
 /* Begin XCBuildConfiguration section */
 		EA3C3BAB289966F1000CA526 /* Debug */ = {
 			isa = XCBuildConfiguration;
+			baseConfigurationReference = EA78C7A42C0E64A800430AD1 /* vds-sample-dev.xcconfig */;
 			buildSettings = {
 				ALWAYS_SEARCH_USER_PATHS = NO;
 				CLANG_ANALYZER_NONNULL = YES;
@@ -635,6 +682,7 @@
 		};
 		EA3C3BAC289966F1000CA526 /* Release */ = {
 			isa = XCBuildConfiguration;
+			baseConfigurationReference = EA78C7A52C0E64CC00430AD1 /* vds-sample.xcconfig */;
 			buildSettings = {
 				ALWAYS_SEARCH_USER_PATHS = NO;
 				CLANG_ANALYZER_NONNULL = YES;
@@ -689,6 +737,7 @@
 		};
 		EA3C3BAE289966F1000CA526 /* Debug */ = {
 			isa = XCBuildConfiguration;
+			baseConfigurationReference = EA78C7A42C0E64A800430AD1 /* vds-sample-dev.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
@@ -696,7 +745,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 61;
+				CURRENT_PROJECT_VERSION = 75;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -724,6 +773,7 @@
 		};
 		EA3C3BAF289966F1000CA526 /* Release */ = {
 			isa = XCBuildConfiguration;
+			baseConfigurationReference = EA78C7A52C0E64CC00430AD1 /* vds-sample.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
@@ -731,7 +781,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 61;
+				CURRENT_PROJECT_VERSION = 75;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -759,6 +809,7 @@
 		};
 		EAF7F0C0289DA16000B287F5 /* Debug */ = {
 			isa = XCBuildConfiguration;
+			baseConfigurationReference = EA78C7A42C0E64A800430AD1 /* vds-sample-dev.xcconfig */;
 			buildSettings = {
 				CODE_SIGN_STYLE = Automatic;
 				DEVELOPMENT_TEAM = FCMA4QKS77;
@@ -768,6 +819,7 @@
 		};
 		EAF7F0C1289DA16000B287F5 /* Release */ = {
 			isa = XCBuildConfiguration;
+			baseConfigurationReference = EA78C7A52C0E64CC00430AD1 /* vds-sample.xcconfig */;
 			buildSettings = {
 				CODE_SIGN_STYLE = Automatic;
 				DEVELOPMENT_TEAM = FCMA4QKS77;
@@ -777,6 +829,7 @@
 		};
 		EAF7F0D0289DA44300B287F5 /* Debug */ = {
 			isa = XCBuildConfiguration;
+			baseConfigurationReference = EA78C7A42C0E64A800430AD1 /* vds-sample-dev.xcconfig */;
 			buildSettings = {
 				CODE_SIGN_STYLE = Automatic;
 				DEVELOPMENT_TEAM = FCMA4QKS77;
@@ -786,6 +839,7 @@
 		};
 		EAF7F0D1289DA44300B287F5 /* Release */ = {
 			isa = XCBuildConfiguration;
+			baseConfigurationReference = EA78C7A52C0E64CC00430AD1 /* vds-sample.xcconfig */;
 			buildSettings = {
 				CODE_SIGN_STYLE = Automatic;
 				DEVELOPMENT_TEAM = FCMA4QKS77;

VDSSample/Classes/ColorPickerView.swift

@@ -9,14 +9,18 @@ import Foundation
 import UIKit
 import VDS
 
-public class ColorPickerView<EnumType>: UIStackView {
-    public var pickerType: EnumType
+public class ColorPickerView: UIStackView, UIColorPickerViewControllerDelegate {
     public var selectedColor: UIColor? {
         didSet {
             selectedColorView.backgroundColor = selectedColor
         }
     }
-    
+   
+    private var colorPicker: UIColorPickerViewController = {
+        let picker = UIColorPickerViewController()
+        return picker
+    }()
+
     var selectedColorView: UIView = {
         let view = UIView()
         view.translatesAutoresizingMaskIntoConstraints = false
@@ -31,22 +35,30 @@ public class ColorPickerView<EnumType>: UIStackView {
         $0.text = "Select"
     }
 
-    public init(with pickerType: EnumType, onClick: @escaping (ColorPickerView)->Void) {
-        self.pickerType = pickerType
+    /// Callback once the user picks a color from the picker.
+    public var onColorSelected: ((UIColor) -> Void)?
+
+    public init(color: UIColor? = nil) {
         super.init(frame: .zero)
+        if let color {
+            selectedColor = color
+        }
+        colorPicker.delegate = self
         setup()
-        button.onClick = { _ in onClick(self) }
+        button.onClick = { _ in
+            UIApplication.topViewController()?.present(self.colorPicker, animated: true)
+        }
     }
-    
+
     required init(coder: NSCoder) {
-        fatalError()
+        fatalError("init(coder:) has not been implemented")
     }
-    
+   
     private func setup() {
         distribution = .fillEqually
         alignment = .fill
         spacing = 10
-        
+
         let indicatorWrapper = View()
         indicatorWrapper.addSubview(selectedColorView)
         indicatorWrapper.height(32)
@@ -54,8 +66,9 @@ public class ColorPickerView<EnumType>: UIStackView {
         indicatorWrapper.pinLeading()
         indicatorWrapper.pinBottom()
         indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor)
-        
+       
         addArrangedSubview(indicatorWrapper)
+
         let buttonWrapper = View()
         buttonWrapper.addSubview(button)
         buttonWrapper.height(32)
@@ -65,4 +78,15 @@ public class ColorPickerView<EnumType>: UIStackView {
         button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor)
         addArrangedSubview(buttonWrapper)
     }
+   
+    // MARK: - UIColorPickerViewControllerDelegate
+
+    public func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
+        selectedColor = viewController.selectedColor
+        onColorSelected?(viewController.selectedColor)
+    }
+   
+    public func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
+        UIApplication.topViewController()?.dismiss(animated: true)
+    }
 }

VDSSample/Classes/Helper.swift

@@ -10,15 +10,15 @@ import VDS
 import UIKit
 
 extension UIView {
-    public func makeWrapper(edgeSpacing: CGFloat = 0.0, isTrailing: Bool = true) -> View {
-        UIView.makeWrapper(for: self, edgeSpacing: edgeSpacing, isTrailing: isTrailing)
+    public func makeWrapper(edgeSpacing: CGFloat = 0.0, isTrailing: Bool = true, isBottom: Bool = false) -> View {
+        UIView.makeWrapper(for: self, edgeSpacing: edgeSpacing, isTrailing: isTrailing, isBottom: isBottom)
     }
     
-    public static func makeWrapper(for view: UIView, edgeSpacing: CGFloat = 0.0, isTrailing: Bool = true) -> View {
-        makeWrapperWithConstraints(for: view, edgeSpacing: edgeSpacing, isTrailing: isTrailing).view
+    public static func makeWrapper(for view: UIView, edgeSpacing: CGFloat = 0.0, isTrailing: Bool = true, isBottom: Bool = false) -> View {
+        makeWrapperWithConstraints(for: view, edgeSpacing: edgeSpacing, isTrailing: isTrailing, isBottom: isBottom).view
     }
     
-    public static func makeWrapperWithConstraints(for view: UIView, edgeSpacing: CGFloat = 0.0, isTrailing: Bool = true) -> (view: View, container: NSLayoutConstraint.Container) {
+    public static func makeWrapperWithConstraints(for view: UIView, edgeSpacing: CGFloat = 0.0, isTrailing: Bool = true, isBottom: Bool = false) -> (view: View, container: NSLayoutConstraint.Container) {
         let container = NSLayoutConstraint.Container()
         let wrapper = View().with {
             $0.translatesAutoresizingMaskIntoConstraints = false
@@ -26,7 +26,11 @@ extension UIView {
         wrapper.addSubview(view)
         
         container.topConstraint = view.pinTop(anchor: wrapper.topAnchor, constant: edgeSpacing)
-        container.bottomConstraint = view.pinBottom(anchor: wrapper.bottomAnchor, constant: edgeSpacing)
+        if isBottom {
+            container.bottomConstraint = view.pinBottomLessThanOrEqualTo(anchor: wrapper.bottomAnchor, constant: edgeSpacing)
+        } else {
+            container.bottomConstraint = view.pinBottom(anchor: wrapper.bottomAnchor, constant: edgeSpacing)
+        }
         container.leadingConstraint = view.pinLeading(anchor: wrapper.leadingAnchor, constant: edgeSpacing)
         if isTrailing {
             container.trailingConstraint = view.pinTrailingLessThanOrEqualTo(anchor: wrapper.trailingAnchor, constant: edgeSpacing)
@@ -60,7 +64,16 @@ extension Changeable {
     }
 }
 
-extension Clickable {
+extension Clickable where Self: UIControl {
+    func onClickActionPublisher(_ text: String, label: UILabel) {
+        onClick = { _ in
+            let handler = labelPublisherCompletionHandler()
+            handler(text, label)
+        }
+    }
+}
+
+extension Clickable where Self: UIView {
     func onClickActionPublisher(_ text: String, label: UILabel) {
         onClick = { _ in
             let handler = labelPublisherCompletionHandler()

VDSSample/Classes/TextField.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 import Combine
 
 open class TextField: UITextField {

VDSSample/Classes/TokenColorPickerFormSection.swift

@@ -0,0 +1,107 @@
+//
+//  TokenColorPickerFormSection.swift
+//  VDSSample
+//
+//  Created by Matt Bruce on 10/7/24.
+//
+
+import Foundation
+import UIKit
+import VDS
+
+public class TokenColorPickerSection<EnumType: RawRepresentable & CaseIterable>: FormSection where EnumType.RawValue == String {
+   
+    //--------------------------------------------------
+    // MARK: - Private Properties
+    //--------------------------------------------------
+    private var picker: UIPickerView
+    private var rowTitle: String = "Color"   
+    private var rowToolTip: Tooltip.TooltipModel?
+
+    ///Handles VDS Color Selections
+    private var tokenColorRow: UIView?
+    private lazy var tokenColorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
+        .with { $0.text = UIColor.VDSColor.paletteBlack.rawValue }
+    }()
+   
+    ///Handles Custom Color picker selections
+    private var customColorRow: UIView?
+    private lazy var customColorView: ColorPickerView = {
+        .init(color: .black).with {
+            $0.onColorSelected =  { [weak self] color in
+                guard let self else { return }
+                onColorSelected?(color)
+            }
+        }
+    }()
+
+    //--------------------------------------------------
+    // MARK: - Public Properties
+    //--------------------------------------------------
+   
+    /// This is the 1st row that the user will pick from, again this enum has to contain "token" and "custom" otherwise it won't work well.
+    public lazy var pickerSelectorView = {
+        PickerSelectorView<EnumType>(title: "",
+                                     picker: picker,
+                                     items: EnumType.allCases as! [EnumType])
+    }()
+
+    public var selectedItem: EnumType { pickerSelectorView.selectedItem }
+   
+    /// Callback for a non-token/non-color selection
+    public var onSelected: ((EnumType) -> Void)?
+    /// Callback after "token" is selected from the VDSColor array
+    public var onTokenSelected: ((UIColor.VDSColor) -> Void)?
+    /// Callback once the user picks a color from the picker.
+    public var onColorSelected: ((UIColor) -> Void)?
+    
+    ///Pass in a title and the reference for the picker
+    public init(title: String? = nil, rowTitle: String = "Color", rowTooltip: Tooltip.TooltipModel? = nil, picker: UIPickerView) {
+        self.picker = picker
+        super.init(frame: .zero)
+        self.title = title
+        self.rowTitle = rowTitle
+        self.rowToolTip = rowTooltip
+        setup()
+    }
+   
+    required init(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    public func setup() {
+        addFormRow(label: rowTitle, tooltip: rowToolTip, view: pickerSelectorView)
+        tokenColorRow = addFormRow(label: "Token", view: tokenColorView)
+        customColorRow = addFormRow(label: "Custom", view: customColorView)
+       
+        tokenColorRow?.isHidden = true
+        customColorRow?.isHidden = true
+       
+        pickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            guard let self else { return }
+            let isToken =  item.rawValue == "token"
+            let isCustom =  item.rawValue == "custom"
+            if isToken {
+                self.onTokenSelected?(self.tokenColorView.selectedItem)
+            } else if let selectedItem = self.customColorView.selectedColor, isCustom {
+                self.onColorSelected?(selectedItem)
+            } else {
+                self.onSelected?(item)
+            }
+            self.tokenColorRow?.isHidden = !isToken
+            self.customColorRow?.isHidden = !isCustom
+        }
+       
+        tokenColorView.onPickerDidSelect = { [weak self] item in
+            guard let self else { return }
+            self.onTokenSelected?(item)
+        }
+    }
+   
+    public func setDefault(value: EnumType) {
+        pickerSelectorView.set(item: value)
+    }
+}

VDSSample/Extensions/Bundle.swift

@@ -45,7 +45,7 @@ struct VDSHelper {
         return bundle.contents("ReleaseNotes") ?? ""
     }
     
-    static func changeLog(for component: ViewProtocol.Type) -> String? {
+    static func changeLog(for component: any ViewProtocol.Type) -> String? {
         return bundle.contents("\(component.self)ChangeLog")
     }
 }

VDSSample/Protocols/PickerBase.swift

@@ -134,8 +134,15 @@ public class PickerSelectorView<EnumType: RawRepresentable>: UIStackView, Picker
     }
     
     private func title(for row: Int) -> String {
-        guard  let item = items[row].rawValue as? String else { return "" }
-        return item
+        let item = items[row]
+        
+        if let item = item as? CustomStringConvertible {
+            return item.description
+        } else if let raw = item.rawValue as? String {
+            return raw
+        } else {
+            return ""
+        }
     }
 
 }

VDSSample/Supporting Files/Artifactory/Artifactory.sh

@@ -4,10 +4,10 @@
 VERSION="2.0"
 #Update onces stable
 #APITOKEN=AKCp5cbwXBA2Rarq6WagmFFxQxcxsARGxSq5g1H8NaGm7837KTgwdWPqsp7FdgRa13B7AcpGN
-#URL=https://oneartifactorycloud.verizon.com/artifactory
+#URL=https://oneartifactorycloud.verizon.com/artifactory/
 
 APITOKEN=AKCp5ZmHP8B1dkLtdSh23bMcWHtrWzoB3SfhoCNpEC5e3dKNhiKsn8TPMZQafXzm2qkeXFXE6
-URL=https://oneartifactoryprod.verizon.com/artifactory
+URL=https://oneartifactoryci.verizon.com/artifactory
 
 LOCALPATH="${1}"
 REMOTEPATH="${2}"

VDSSample/Supporting Files/Artifactory/ArtifactoryItems.txt

@@ -1 +1 @@
-${PROJECT_DIR}/SharedFrameworks/VDSTokens.xcframework GVJV_VDS_Maven/@vds-tokens/ios/VDSTokens.2.0.0.xcframework.zip
+${PROJECT_DIR}/SharedFrameworks/VDSCoreTokens.xcframework GVJV_VDS_Maven/@vds-tokens/ios/VDSCoreTokens.1.0.0-alpha.10.xcframework.zip

VDSSample/Supporting Files/Resources/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "VZ-My-Verizon-iOS-1024x1024.png",
+      "filename" : "Icon on stone.png",
       "idiom" : "universal",
       "platform" : "ios",
       "size" : "1024x1024"

VDSSample/Supporting Files/Resources/SVG.xcassets/external-link.imageset/Contents.json

@@ -1,15 +0,0 @@
-{
-  "images" : [
-    {
-      "filename" : "external-link.svg",
-      "idiom" : "universal"
-    }
-  ],
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
-  },
-  "properties" : {
-    "preserves-vector-representation" : true
-  }
-}

VDSSample/Supporting Files/Resources/SVG.xcassets/external-link.imageset/external-link.svg

@@ -1 +0,0 @@
-<svg id="f5a11f6b-f49f-40e8-9fef-b62ba7c1147d" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.6 21.6"><path d="M19.8,1.8V8.2H18.68V3.72L12.56,9.84l-.8-.8,6.12-6.11H13.4V1.8ZM15.3,18.68H2.93V6.3H12.8l1-1.12H1.8V19.8H16.43V7.8l-1.13,1Z"/></svg>

VDSSample/Supporting Files/vds-sample-dev.xcconfig

@@ -0,0 +1,11 @@
+//
+//  vds-sample-dev.xcconfig
+//  VDSSample
+//
+//  Created by Matt Bruce on 6/3/24.
+//
+
+// Configuration settings file format documentation can be found at:
+// https://help.apple.com/xcode/#/dev745c5c974
+
+#include? "../../workspaceSettings.xcconfig"

VDSSample/Supporting Files/vds-sample.xcconfig

@@ -0,0 +1,11 @@
+//
+//  vds-sample.xcconfig
+//  VDSSample
+//
+//  Created by Matt Bruce on 6/3/24.
+//
+
+// Configuration settings file format documentation can be found at:
+// https://help.apple.com/xcode/#/dev745c5c974
+
+#include? "../../workspaceSettings.xcconfig"

VDSSample/ViewControllers/BadgeIndicatorViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 import Combine
 
 class  BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
@@ -37,18 +37,45 @@ class  BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
                            items: BadgeIndicator.MaximumDigits.allCases)
     }()
     
-    lazy var borderColorLightPickerSelectorView = {
-        PickerSelectorView(title: "",
-                           picker: self.picker,
-                           items: UIColor.VDSColor.allCases)
+    enum BorderColor: String, CaseIterable {
+        case `default`, token, custom
+    }
+    
+    lazy var borderColorLightPickerSelectorView: TokenColorPickerSection  = {
+        TokenColorPickerSection<BorderColor>(rowTitle: "Border Light",
+                                                 picker: self.picker).with {
+            $0.onSelected = { [weak self] color in
+                guard let self else { return }
+                component.borderColorLight = nil
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                component.borderColorLight = color.uiColor
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                component.borderColorLight = color
+            }
+        }
     }()
 
-    lazy var borderColorDarkPickerSelectorView = {
-        PickerSelectorView(title: "",
-                           picker: self.picker,
-                           items: UIColor.VDSColor.allCases)
+    lazy var borderColorDarkPickerSelectorView : TokenColorPickerSection  = {
+        TokenColorPickerSection<BorderColor>(rowTitle: "Border Dark",
+                                                 picker: self.picker).with {
+            $0.onSelected = { [weak self] color in
+                guard let self else { return }
+                component.borderColorDark = nil
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                component.borderColorDark = color.uiColor
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                component.borderColorDark = color
+            }
+        }
     }()
-
     
     var textField = NumericField()
     var leadingCharacterTextField = TextField()
@@ -59,7 +86,7 @@ class  BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
 
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: .makeWrapper(for: component))
+        addContentTopView(view: component, pinTrailing: false)
         setupPicker()
         setupModel()
     }
@@ -82,13 +109,13 @@ class  BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
         addFormRow(label: "Vertical Padding", view: verticalPaddingTextField)
         addFormRow(label: "Fill Color", view: fillColorPickerSelectorView)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
-        addFormRow(label: "Hide Border", view: hideBorderSwitch)
-        addFormRow(label: "Border Light", view: borderColorLightPickerSelectorView)
-        addFormRow(label: "Border Dark", view: borderColorDarkPickerSelectorView)
+        addFormRow(label: "Hide Border", view: hideBorderSwitch, pinTrailing: false)
+        append(section: borderColorLightPickerSelectorView)
+        append(section: borderColorDarkPickerSelectorView)
         addFormRow(label: "Size", view: textSizePickerSelectorView)
         addFormRow(label: "Accessiblity Text", view: accessibilityTextField)
         
-        dotForm.addFormRow(label: "Hide Dot", view: hideDotSwitch)
+        dotForm.addFormRow(label: "Hide Dot", view: hideDotSwitch, pinTrailing: false)
         dotForm.addFormRow(label: "Dot Size", view: dotSizeTextField)
         numberedForm.addFormRow(label: "Leading Character", view: leadingCharacterTextField)
         numberedForm.addFormRow(label: "Trailing Text", view: trailingTextField)
@@ -173,8 +200,6 @@ class  BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
         fillColorPickerSelectorView.text = component.fillColor.rawValue
         textSizePickerSelectorView.text = component.size.rawValue
         maxDigitsPickerSelectorView.text = component.maximumDigits.rawValue
-        borderColorDarkPickerSelectorView.text = component.borderColorDark?.toVDSColor()?.rawValue ?? ""
-        borderColorLightPickerSelectorView.text = component.borderColorLight?.toVDSColor()?.rawValue ?? ""
         textField.text = "\(component.number!)"
         visibleForms()
     }
@@ -207,14 +232,6 @@ class  BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
         maxDigitsPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.maximumDigits = item
         }
-        
-        borderColorDarkPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.borderColorDark = item.uiColor
-        }
-        
-        borderColorLightPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.borderColorLight = item.uiColor
-        }
     }
 }
 

VDSSample/ViewControllers/BadgeViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 import Combine
 
 class  BadgeViewController: BaseViewController<Badge> {
@@ -36,12 +36,14 @@ class  BadgeViewController: BaseViewController<Badge> {
             }
         }
     }
-    
-    lazy var fillColorPickerSelectorView = {
-        PickerSelectorView(title: "red",
-                            picker: self.picker,
-                           items: Badge.FillColor.allCases)
-    }()
+        
+    enum FillColor: String, CaseIterable {
+        case red, yellow, green, orange, blue, black, white, token, custom
+    }
+
+    enum TextColor: String, CaseIterable {
+        case `default`, token, custom
+    }
     
     lazy var numberOfLinesPickerSelectorView = {
         PickerSelectorView(title: "one",
@@ -51,18 +53,74 @@ class  BadgeViewController: BaseViewController<Badge> {
     
     var textField = TextField()
     var maxWidthTextField = NumericField()
-        
+    
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: .makeWrapper(for: component))
+        addContentTopView(view: component, pinTrailing: false)
         setupPicker()
         setupModel()
     }
+        
+    lazy var fillColorSection = {
+        TokenColorPickerSection<FillColor>(rowTitle: "Fill Color", picker: self.picker).with {
+            $0.onSelected = { [weak self] item in
+                guard let self else { return }
+                var fillColor: Badge.FillColor = .red
+                switch item {
+                case .red:
+                    fillColor = .red
+                case .yellow:
+                    fillColor = .yellow
+                case .green:
+                    fillColor = .green
+                case .orange:
+                    fillColor = .orange
+                case .blue:
+                    fillColor = .blue
+                case .black:
+                    fillColor = .black
+                case .white:
+                    fillColor = .white
+                default:
+                    break
+                }
+                component.fillColor = fillColor
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                component.fillColor = .token(color)
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                component.fillColor = .custom(color)
+            }
+        }
+    }()
+    
+    lazy var textColorSection = {
+        TokenColorPickerSection<TextColor>(rowTitle: "Text Color", picker: self.picker).with {
+            $0.onSelected = { [weak self] item in
+                guard let self else { return }
+                component.textColor = nil
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                component.textColor = .token(color)
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                component.textColor = .custom(color)
+            }
+        }
+    }()
     
     override func setupForm(){
         super.setupForm()  
-        addFormRow(label: "Fill Color", view: fillColorPickerSelectorView)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        
+        append(section: fillColorSection)
+        append(section: textColorSection)
+        
         addFormRow(label: "Text", view: textField)
         addFormRow(label: "Max Width", view: maxWidthTextField)
         addFormRow(label: "Number of Lines", view: numberOfLinesPickerSelectorView)
@@ -89,6 +147,8 @@ class  BadgeViewController: BaseViewController<Badge> {
         //setup UI
         surfacePickerSelectorView.text = component.surface.rawValue
         textField.text = component.text
+        fillColorSection.setDefault(value: .red)
+        textColorSection.setDefault(value: .default)
     }
     
     func setupPicker(){
@@ -97,24 +157,13 @@ class  BadgeViewController: BaseViewController<Badge> {
             self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }        
-        
-        fillColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.fillColor = item
-        }
-        
-        numberOfLinesPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.numberOfLines = item.intValue
-        }
     }
 }
 
 extension BadgeViewController: ComponentSampleable {
     static func makeSample() -> ComponentSample {
-        let component = Self.makeComponent()
-        component.fillColor = .red
-        component.text = "Terms and conditions"
-        component.maxWidth = 70
-        component.numberOfLines = 3
-        return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
+        let c = Self()
+        c.setupModel()
+        return ComponentSample(component: c.component, trailingPinningType: .lessThanOrEqual)
     }
 }

VDSSample/ViewControllers/BaseViewController.swift

@@ -43,7 +43,7 @@ public class FormSection: UIStackView {
     }
     
     @discardableResult
-    open func addFormRow(label: String, tooltip: Tooltip.TooltipModel? = nil, view: UIView) -> UIView {
+    open func addFormRow(label: String, tooltip: Tooltip.TooltipModel? = nil, view: UIView, pinTrailing: Bool = true) -> UIView {
         let formRow = UIStackView().with {
             $0.translatesAutoresizingMaskIntoConstraints = false
             $0.alignment = .fill
@@ -63,7 +63,7 @@ public class FormSection: UIStackView {
         }
         
         formRow.addArrangedSubview(label)
-        formRow.addArrangedSubview(view)
+        formRow.addArrangedSubview(pinTrailing ? view : .makeWrapper(for: view))
 
         addArrangedSubview(formRow)
         return formRow
@@ -177,7 +177,7 @@ public class BaseViewController<Component: UIView>: UIViewController, Initable ,
     open override func viewDidLoad() {
         super.viewDidLoad()
         
-        if let component = component as? ViewProtocol, let content = VDSHelper.changeLog(for: type(of: component)) {
+        if let component = component as? (any ViewProtocol), let content = VDSHelper.changeLog(for: type(of: component)) {
             let tooltip =  VDS.Tooltip()
             tooltip.title = "ChangeLog"
             tooltip.content = content
@@ -252,8 +252,16 @@ public class BaseViewController<Component: UIView>: UIViewController, Initable ,
         NotificationCenter.default.publisher(for: UIAccessibility.voiceOverStatusDidChangeNotification).sink { [weak self] _ in
             if UIAccessibility.isVoiceOverRunning {
                 if let component = self?.component {
-                    DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
-                        self?.loadCustomRotors()
+                    DispatchQueue.main.asyncAfter(deadline: .now() + 1) { [weak self] in
+                        guard let self else { return }
+                        loadCustomRotors()
+                        if let rotors = component.accessibilityCustomRotors {
+                            if var accessibilityCustomRotors {
+                                accessibilityCustomRotors.append(contentsOf: rotors)
+                            } else {
+                                accessibilityCustomRotors = rotors
+                            }
+                        }
                         UIAccessibility.post(notification: .screenChanged, argument: component)
                     }
                 }
@@ -303,7 +311,7 @@ public class BaseViewController<Component: UIView>: UIViewController, Initable ,
     }
 
     public func setupForm() {
-        addFormRow(label: "Show Bounds", view: debugViewSwitch)
+        addFormRow(label: "Show Bounds", view: debugViewSwitch, pinTrailing: false)
     }
     
     let actionLabel = Label()
@@ -326,10 +334,34 @@ public class BaseViewController<Component: UIView>: UIViewController, Initable ,
         viewController.didMove(toParent: self)
     }
     
-    open func addContentTopView(view: UIView, edgeSpacing: CGFloat = 16.0) {
+    var componentTrailingEqualConstraint: NSLayoutConstraint?
+    var componentTrailingLessThanEqualConstraint: NSLayoutConstraint?
+    open func addContentTopView(view: UIView, edgeSpacing: CGFloat = 16.0, pinTrailing: Bool = true) {
         view.translatesAutoresizingMaskIntoConstraints = false
         contentTopView.addSubview(view)
-        view.pinToSuperView(.uniform(edgeSpacing))
+        componentTrailingEqualConstraint = view.pinTrailing(anchor: contentTopView.trailingAnchor, constant: edgeSpacing)?.deactivate()
+        componentTrailingLessThanEqualConstraint = view.pinTrailingLessThanOrEqualTo(anchor: contentTopView.trailingAnchor, constant: edgeSpacing)?.deactivate()
+        view
+            .pinTop(edgeSpacing)
+            .pinLeading(edgeSpacing)
+            .pinBottom(edgeSpacing)
+        
+        if pinTrailing {
+            componentTrailingEqualConstraint?.activate()
+        } else {
+            componentTrailingLessThanEqualConstraint?.activate()
+        }
+    }
+    
+    open func updateComponentConstraint(pinTrailing: Bool = true) {
+        componentTrailingEqualConstraint?.deactivate()
+        componentTrailingLessThanEqualConstraint?.deactivate()
+        
+        if pinTrailing {
+            componentTrailingEqualConstraint?.activate()
+        } else {
+            componentTrailingLessThanEqualConstraint?.activate()
+        }
     }
 
     open func append(section: FormSection) {
@@ -337,8 +369,8 @@ public class BaseViewController<Component: UIView>: UIViewController, Initable ,
     }
        
     @discardableResult
-    open func addFormRow(label: String, tooltip: Tooltip.TooltipModel? = nil, view: UIView) -> UIView {
-        return formStackView.addFormRow(label: label,tooltip: tooltip, view: view)
+    open func addFormRow(label: String, tooltip: Tooltip.TooltipModel? = nil, view: UIView, pinTrailing: Bool = true) -> UIView {
+        return formStackView.addFormRow(label: label,tooltip: tooltip, view: view, pinTrailing: pinTrailing)
     }
     
     var activeTextField: UITextField?

VDSSample/ViewControllers/BreadcrumbsViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 import Combine
 
 class  BreadcrumbsViewController: BaseViewController<Breadcrumbs> {
@@ -18,18 +18,20 @@ class  BreadcrumbsViewController: BaseViewController<Breadcrumbs> {
     var selectedCrumbLabel = Label().with { $0.textStyle = .boldBodyMedium }
     var allBreadcrumbs: [Breadcrumbs.BreadcrumbItemModel] = [
         .init(text: "Home"),
-        .init(text: "Support", enabeled: false),
+        .init(text: "Support"),
         .init(text: "Service & Apps"),
         .init(text: "My Verizon"),
         .init(text: "Bill"),
-        .init(text: "Mobile Billing & Payments"),
         .init(text: "Billing statement FAQs", selected: true)
     ]
     
     var some: [Breadcrumbs.BreadcrumbItemModel] = [
-        .init(text: "Plans"),
-        .init(text: "Upgrade Plan"),
-        .init(text: "Billing Statement Frequently Asked Questions About Stuff You don't want to see", selected: true)
+        .init(text: "Home"),
+        .init(text: "Support"),
+        .init(text: "Service & Apps"),
+        .init(text: "My Verizon"),
+        .init(text: "Bill"),
+        .init(text: "Billing Statement Frequently Asked Questions to cause word wrap", selected: true)
     ]
     
     override func viewDidLoad() {
@@ -46,8 +48,8 @@ class  BreadcrumbsViewController: BaseViewController<Breadcrumbs> {
     override func setupForm(){
         super.setupForm()
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
-        addFormRow(label: "Last Crumb Selected", view: selectedSwitch)
-        addFormRow(label: "Large Sample", view: sampleSwitch)
+        addFormRow(label: "Last Crumb Selected", view: selectedSwitch, pinTrailing: false)
+        addFormRow(label: "No Long Breadcrumbs", view: sampleSwitch, pinTrailing: false)
 
         selectedSwitch.onChange = { [weak self] sender in
             guard let self else { return }
@@ -96,7 +98,7 @@ extension BreadcrumbsViewController: ComponentSampleable {
         let component = Self.makeComponent()
         component.breadcrumbModels =  [
             .init(text: "Home"),
-            .init(text: "Support", enabeled: false),
+            .init(text: "Support"),
             .init(text: "Service & Apps"),
             .init(text: "My Verizon"),
             .init(text: "Bill"),

VDSSample/ViewControllers/ButtonGroupViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 
 class ButtonGroupViewController: BaseViewController<ButtonGroup> {
     var collectionView: UICollectionView!
@@ -111,7 +111,7 @@ class ButtonGroupViewController: BaseViewController<ButtonGroup> {
         super.setupForm()
         addActionRow()
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
-        addFormRow(label: "Disabled", view: disabledSwitch)
+        addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
         addFormRow(label: "Alignment", view: buttonAlignmentSelectorView)
         addFormRow(label: "Width", view: widthTextField)
         addFormRow(label: "Row Quantity", view: rowQuantitySelectorView)

VDSSample/ViewControllers/ButtonIconViewController.swift

@@ -9,7 +9,7 @@ import Foundation
 import UIKit
 import VDS
 import Combine
-import VDSTokens
+import VDSCoreTokens
 
 class ButtonIconViewController: BaseViewController<ButtonIcon> {
     
@@ -49,7 +49,10 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
                            items: ButtonIcon.Size.allCases)
     }()
     
-    var customSizeField = NumericField()
+    var customContainerSizeField = NumericField()
+    var customIconSizeField = NumericField()
+    var customBadgeIndicatorXField = NumericField()
+    var customBadgeIndicatorYField = NumericField()
     var centerX = NumericField()
     var centerY = NumericField()
     var fitToIcon = Toggle()
@@ -68,63 +71,78 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
     
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: .makeWrapper(for: component, edgeSpacing: 16.0), edgeSpacing: 0.0)
+        addContentTopView(view: component, pinTrailing: false)      
         setupPicker()
         setupModel()
     }
     
-    var badgeIndicatorFormStackView = FormSection().with { $0.isHidden = true }
+    var badgeIndicatorFormStackView = FormSection().with { $0.isHidden = true; $0.title = "Badge Indicator" }
     
     ///ColorPicker
-    var colorPickerType: ColorPickerType = .light
-    enum ColorPickerType {
-        case light, dark
-    }
-    
-    lazy var colorPicker: UIColorPickerViewController = {
-        let picker = UIColorPickerViewController()
-        picker.delegate = self
-        return picker
-    }()
-    
-    lazy var lightColorPicker: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.light) {[weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
+    lazy var lightColorPicker: ColorPickerView = {
+        return .init().with {
+            $0.onColorSelected =  { [weak self] _ in
+                guard let self else { return }
+                updateColors()
+            }
         }
     }()
-    
+           
     lazy var darkColorPicker: ColorPickerView = {
-        return .init(with: ColorPickerType.dark) {[weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
+        return .init().with {
+            $0.onColorSelected =  { [weak self] _ in
+                guard let self else { return }
+                updateColors()
+            }
         }
     }()
     
+    func updateColors() {
+        if let selectedLightColor = lightColorPicker.selectedColor {
+            component.selectedIconColorConfiguration = .init(selectedLightColor, selectedLightColor)
+        } else if let selectedDarkColor = darkColorPicker.selectedColor,
+           let selectedLightColor = lightColorPicker.selectedColor {
+            component.selectedIconColorConfiguration = .init(selectedLightColor, selectedDarkColor)
+        }
+    }
+    
     override func setupForm(){
         super.setupForm()
-        addFormRow(label: "Disabled", view: disabledSwitch)
+        addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Surface Type", view: surfaceTypePickerSelectorView)
         addFormRow(label: "Size", view: sizePickerSelectorView)
         addFormRow(label: "Kind", view: kindPickerSelectorView)
-        addFormRow(label: "Selected Light", view: lightColorPicker)
-        addFormRow(label: "Selected Dark", view: darkColorPicker)
-        addFormRow(label: "Floating", view: floating)
-        addFormRow(label: "Hide Border", view: hideBorder)
-        addFormRow(label: "Fit To Icon", view: fitToIcon)
+        addFormRow(label: "Floating", view: floating, pinTrailing: false)
+        addFormRow(label: "Hide Border", view: hideBorder, pinTrailing: false)
+        addFormRow(label: "Fit To Icon", view: fitToIcon, pinTrailing: false)
         addFormRow(label: "Name", view: namePickerSelectorView)
-        addFormRow(label: "Selected Icon Name", view: selectedIconNamePickerSelectorView)
-        addFormRow(label: "Selectable", view: selectableSwitch)
         addFormRow(label: "X Offset", view: centerX)
         addFormRow(label: "Y Offset", view: centerY)
+
+        append(section: .init().with {
+            $0.title = "Select State"
+            $0.addFormRow(label: "Selectable", view: selectableSwitch, pinTrailing: false)
+            $0.addFormRow(label: "Selected Icon Name", view: selectedIconNamePickerSelectorView)
+            $0.addFormRow(label: "Selected Light", view: lightColorPicker)
+            $0.addFormRow(label: "Selected Dark", view: darkColorPicker)
+        })
         
+        addFormRow(label: "Show Badge Indicator", view: badgeIndicatorSwitch, pinTrailing: false)
         //badgeIndicator section
-        addFormRow(label: "Show Badge Indicator", view: badgeIndicatorSwitch)
         badgeIndicatorFormStackView.addFormRow(label: "Expand Direction", view: badgeIndicatorExpandDirectionPickerSelectorView)
-        badgeIndicatorFormStackView.addFormRow(label: "Badge Variants", view: variantOneSwitch)
+        badgeIndicatorFormStackView.addFormRow(label: "Badge Variants", view: variantOneSwitch, pinTrailing: false)
+        badgeIndicatorFormStackView.addFormRow(label: "Custom X offset", view: customBadgeIndicatorXField)
+        badgeIndicatorFormStackView.addFormRow(label: "Custom Y offset", view: customBadgeIndicatorYField)
+
         append(section: badgeIndicatorFormStackView)
 
+        //custom section
+        let custom = FormSection().with { $0.title = "Custom Settings"}
+        custom.addFormRow(label: "Container Size", view: customContainerSizeField)
+        custom.addFormRow(label: "Icon Size", view: customIconSizeField)
+        append(section: custom)
+
         variantOneSwitch.onChange = { [weak self] sender in
             self?.setBadgeIndicatorModel()
         }
@@ -158,12 +176,30 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
             self?.component.fitToIcon = sender.isOn
         }
         
-        customSizeField
+        customContainerSizeField
             .numberPublisher
             .sink { [weak self] number in
-                self?.component.customSize = number?.intValue
+                self?.component.customContainerSize = number?.intValue
             }.store(in: &subscribers)
         
+        customIconSizeField
+            .numberPublisher
+            .sink { [weak self] number in
+                self?.component.customIconSize = number?.intValue
+            }.store(in: &subscribers)
+
+        customBadgeIndicatorXField
+            .numberPublisher
+            .sink { [weak self] number in
+                self?.updateCustomBadgeIndicator()
+            }.store(in: &subscribers)
+
+        customBadgeIndicatorYField
+            .numberPublisher
+            .sink { [weak self] number in
+                self?.updateCustomBadgeIndicator()
+            }.store(in: &subscribers)
+
         centerX
             .numberPublisher
             .sink { [weak self] _ in
@@ -177,9 +213,19 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
             }.store(in: &subscribers)
     }
     
+    func updateCustomBadgeIndicator() {
+        if let x = customBadgeIndicatorXField.floatValue, let y = customBadgeIndicatorYField.floatValue {
+            component.customBadgeIndicatorOffset = .init(x: x, y: y)
+        } else {
+            component.customBadgeIndicatorOffset = nil
+        }
+    }
+
+    
     func setupModel() {
         let name = Icon.Name.addToFavorite
-        
+        let selectedName = Icon.Name.addedToFavorite
+        component.selectedIconName = selectedName
         component.iconName = name
         component.onChange = { c in print("changed: \(c.isSelected)") }
         //setup UI
@@ -188,6 +234,7 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
         kindPickerSelectorView.text = component.kind.rawValue
         sizePickerSelectorView.text = component.size.rawValue
         namePickerSelectorView.text = name.rawValue
+        selectedIconNamePickerSelectorView.text = selectedName.rawValue
         disabledSwitch.isOn = !component.isEnabled
         badgeIndicatorExpandDirectionPickerSelectorView.text = ButtonIcon.BadgeIndicatorModel.ExpandDirection.right.rawValue
     }
@@ -269,27 +316,3 @@ extension ButtonIconViewController: ComponentSampleable {
         return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
     }
 }
-
-extension ButtonIconViewController: UIColorPickerViewControllerDelegate {
-    
-    func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
-        let selectedColor = picker.selectedColor
-        if let selectedColor {
-            colorPicker.selectedColor = selectedColor
-        }
-        present(colorPicker, animated: true)
-    }
-
-    func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
-        dismiss(animated: true)
-    }
-    
-    func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
-        let color = viewController.selectedColor
-        let selectedColorPickerView = colorPickerType == .dark ? darkColorPicker : lightColorPicker
-        selectedColorPickerView.selectedColor = color
-        if let selectedDarkColor = darkColorPicker.selectedColor, let selectedLightColor = lightColorPicker.selectedColor {
-            component.selectedIconColorConfiguration = .init(selectedLightColor, selectedDarkColor)
-        }
-    }
-}

VDSSample/ViewControllers/ButtonViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 
 class ButtonViewController: BaseViewController<Button> {
     
@@ -32,7 +32,7 @@ class ButtonViewController: BaseViewController<Button> {
     
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: .makeWrapper(for: component, edgeSpacing: 16.0), edgeSpacing: 0.0)
+        addContentTopView(view: component, pinTrailing: false)
         
         setupPicker()
         setupModel()
@@ -43,7 +43,7 @@ class ButtonViewController: BaseViewController<Button> {
         addFormRow(label: "Action", view: label)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Use", view: usePickerSelectorView)
-        addFormRow(label: "Disabled", view: disabledSwitch)
+        addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
         addFormRow(label: "Text", view: textField)
         addFormRow(label: "Width", view: widthTextField)
         addFormRow(label: "Percentage (1-100)", view: percentageTextField)

VDSSample/ViewControllers/CalendarViewController.swift

@@ -9,10 +9,10 @@ import Foundation
 import UIKit
 import VDS
 import Combine
-import VDSTokens
+import VDSCoreTokens
 
 class CalendarViewController: BaseViewController<CalendarBase> {
-    
+    let label = Label()
     var containerBorderSwitch = Toggle()
     var hideCurrentDateIndicatorSwitch = Toggle()
     var transparentBgSwitch = Toggle()
@@ -32,8 +32,8 @@ class CalendarViewController: BaseViewController<CalendarBase> {
     private var indicatorOnePicker: UIDatePicker = UIDatePicker()
     private var indicatorTwoPicker: UIDatePicker = UIDatePicker()
     private var indicatorThreePicker: UIDatePicker = UIDatePicker()
-    private var activeDatePicker: UIDatePicker = UIDatePicker()
-    private var inactiveDatePicker: UIDatePicker = UIDatePicker()
+    private var activeDatePicker: UIDatePicker = UIDatePicker().with { $0.datePickerMode = .date }
+    private var inactiveDatePicker: UIDatePicker = UIDatePicker().with { $0.datePickerMode = .date }
     
     var indicators: [CalendarBase.CalendarIndicatorModel] = []
     let indicatorOnePickerTag = 1
@@ -74,21 +74,22 @@ class CalendarViewController: BaseViewController<CalendarBase> {
         ]
         
         //add form rows
+        addFormRow(label: "onChange", view: label)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
-        addFormRow(label: "Hide Container Border", view: containerBorderSwitch)
-        addFormRow(label: "Hide Current Date Indicator", view: hideCurrentDateIndicatorSwitch)
+        addFormRow(label: "Hide Container Border", view: containerBorderSwitch, pinTrailing: false)
+        addFormRow(label: "Hide Current Date Indicator", view: hideCurrentDateIndicatorSwitch, pinTrailing: false)
         addFormRow(label: "Min Date", view: minDatePicker)
         addFormRow(label: "Max Date", view: maxDatePicker)
-        addFormRow(label: "Transparent Background", view: transparentBgSwitch)
+        addFormRow(label: "Transparent Background", view: transparentBgSwitch, pinTrailing: false)
         addFormRow(label: "Active Dates", view: activeDatesField)
         addFormRow(label: "Select ActiveDate", view: activeDatePicker)
-        addFormRow(label: "Clear Active Dates", view: clearActiveDatesSwitch)
+        addFormRow(label: "Clear Active Dates", view: clearActiveDatesSwitch, pinTrailing: false)
         addFormRow(label: "Inactive Dates", view: inactiveDatesField)
         addFormRow(label: "Select InActiveDate", view: inactiveDatePicker)
-        addFormRow(label: "Clear Inactive Dates", view: clearInactiveDatesSwitch)
-        addFormRow(label: "Indicator One", view: indicatorOneSwitch)
-        addFormRow(label: "Indicator Two", view: indicatorTwoSwitch)
-        addFormRow(label: "Indicator Three", view: indicatorThreeSwitch)
+        addFormRow(label: "Clear Inactive Dates", view: clearInactiveDatesSwitch, pinTrailing: false)
+        addFormRow(label: "Indicator One", view: indicatorOneSwitch, pinTrailing: false)
+        addFormRow(label: "Indicator Two", view: indicatorTwoSwitch, pinTrailing: false)
+        addFormRow(label: "Indicator Three", view: indicatorThreeSwitch, pinTrailing: false)
         addFormRow(label: "Legend One", view: legendOneField)
         addFormRow(label: "Legend Two", view: legendTwoField)
         addFormRow(label: "Legend Three", view: legendThreeField)
@@ -196,6 +197,15 @@ class CalendarViewController: BaseViewController<CalendarBase> {
     }
     
     func setupModel() {
+        let calendar = Calendar.current
+        let indicatorDate = calendar.startOfDay(for: calendar.date(byAdding: .day, value: 1, to: Date())!)
+        component.minDate = Date().startOfMonth
+        component.maxDate = Date().endOfMonth
+        component.onChange = { [weak self] control in
+            self?.label.text = DateFormatter.localizedString(from: control.selectedDate, dateStyle: .short, timeStyle: .none)
+        }
+        minDatePicker.date = component.minDate
+        maxDatePicker.date = component.maxDate
         component.indicators = indicators
         legendOneField.text = "Due Date"
         legendTwoField.text = "Auto Pay"
@@ -204,9 +214,9 @@ class CalendarViewController: BaseViewController<CalendarBase> {
         indicatorTwoSwitch.isOn = true
         indicatorThreeSwitch.isOn = true
         hideCurrentDateIndicatorSwitch.isOn = false
-        indicatorOnePicker.date = Calendar.current.date(byAdding: .day, value: 1, to: Date())!
-        indicatorTwoPicker.date = Calendar.current.date(byAdding: .day, value: 1, to: Date())!
-        indicatorThreePicker.date = Calendar.current.date(byAdding: .day, value: 1, to: Date())!
+        indicatorOnePicker.date = indicatorDate
+        indicatorTwoPicker.date = indicatorDate
+        indicatorThreePicker.date = indicatorDate
         updateIndicatorData(label: legendOneField.text ?? "", date: indicatorOnePicker.date, index: 0)
         updateIndicatorData(label: legendTwoField.text ?? "", date: indicatorTwoPicker.date, index: 1)
         updateIndicatorData(label: legendThreeField.text ?? "", date: indicatorThreePicker.date, index: 2)
@@ -215,7 +225,7 @@ class CalendarViewController: BaseViewController<CalendarBase> {
     func updateIndicatorData(label: String = "", date: Date?, index:Int) {
         indicators[index].label = label
         indicators[index].date = date ?? Date()
-        component.indicators = indicators
+        setIndicatorsData()
     }
     
     func setIndicatorsData() {
@@ -248,17 +258,7 @@ class CalendarViewController: BaseViewController<CalendarBase> {
     }
     
     @objc func datePickerValueChanged(_ sender: UIDatePicker){
-        
-        // Create date formatter
-        let dateFormatter: DateFormatter = DateFormatter()
-        
-        // Set date format
-        dateFormatter.dateFormat = "MM/dd/yyyy hh:mm a"
-        
-        // Apply date format
-        //        let selectedDate: String = dateFormatter.string(from: sender.date)
-        //        print("Selected value \(selectedDate)")
-        
+                        
         switch sender.tag {
         case indicatorOnePickerTag:
             updateIndicatorData(label: legendOneField.text ?? "", date: sender.date, index: 0)
@@ -303,3 +303,11 @@ class CalendarViewController: BaseViewController<CalendarBase> {
         return day
     }
 }
+
+extension CalendarViewController: ComponentSampleable {
+    static func makeSample() -> ComponentSample {
+        let c = Self()
+        c.viewDidLoad()
+        return ComponentSample(component: c.component, edgeInset: .init(top: 16, left: 0, bottom: 16, right: 0))
+    }
+}

VDSSample/ViewControllers/CarouselScrollbarViewConttroller.swift

@@ -9,7 +9,7 @@ import Foundation
 import UIKit
 import VDS
 import Combine
-import VDSTokens
+import VDSCoreTokens
 
 class CarouselScrollbarViewConttroller: BaseViewController<CarouselScrollbar> {
     
@@ -114,7 +114,7 @@ class CarouselScrollbarViewConttroller: BaseViewController<CarouselScrollbar> {
         }
         
         layoutPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.selectedLayout = item
+            self?.component.layout = item
             self?.component.position = Int(self?.positionTextField.text ?? "1") ?? 1
         }
     }

VDSSample/ViewControllers/CarouselViewController.swift

@@ -0,0 +1,229 @@
+//
+//  CarouselViewController.swift
+//  VDSSample
+//
+//  Created by Kanamarlapudi, Vasavi on 29/05/24.
+//
+
+import Foundation
+import UIKit
+import VDS
+import Combine
+import VDSCoreTokens
+
+class CarouselViewController: BaseViewController<Carousel> {
+    
+    let label = Label()
+    
+    lazy var paginationDisplayPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Carousel.PaginationDisplay.allCases)
+    }()
+    
+    lazy var peekPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Carousel.Peek.allCases)
+    }()
+    
+    lazy var gutterPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Carousel.Gutter.allCases)
+    }()
+    
+    lazy var layoutPickerSelectorView = {
+        PickerSelectorView(title: "1UP",
+                           picker: self.picker,
+                           items: UIDevice.isIPad ? CarouselScrollbar.Layout.allCases : [CarouselScrollbar.Layout.oneUP, CarouselScrollbar.Layout.twoUP, CarouselScrollbar.Layout.threeUP])
+    }()
+    
+    lazy var paginationKindPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: ButtonIcon.Kind.allCases)
+    }()
+    
+    lazy var horizAlignmtPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Carousel.Horizontal.allCases)
+    }()
+    
+    lazy var vertAlignmtPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Carousel.Vertical.allCases)
+    }()
+    
+    var paginationFloatingSwitch = Toggle()
+    var paginationInsetField = NumericField()
+    var selectedIndexField = NumericField()
+    var rows: [UIView] = []
+    
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        addContentTopView(view: component)
+        setupPicker()
+        setupModel()
+    }
+    
+    override func setupForm() {
+        super.setupForm()
+        //add form rows
+        addFormRow(label: "onChange", view: label)
+        addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Pagination Display", view: paginationDisplayPickerSelectorView)
+        addFormRow(label: "Peek", view: peekPickerSelectorView)
+        addFormRow(label: "Gutter", view: gutterPickerSelectorView)
+        addFormRow(label: "Layout", view: layoutPickerSelectorView)
+//        addFormRow(label: "Selected Group Index", view: selectedIndexField)
+        addFormRow(label: "Pagination Kind", view: paginationKindPickerSelectorView)
+        addFormRow(label: "Pagination Float", view: paginationFloatingSwitch, pinTrailing: false)
+        addFormRow(label: "Pagination Inset", view: paginationInsetField)
+        addFormRow(label: "Slot Horizontal Alignment", view: horizAlignmtPickerSelectorView)
+        addFormRow(label: "Slot Vertical Alignment", view: vertAlignmtPickerSelectorView)
+        
+        selectedIndexField
+            .numberPublisher
+            .sink { [weak self] number in
+                if let number, number.intValue >= 0 {
+                    self?.component.groupIndex = number.intValue
+                } else {
+                    self?.component.groupIndex = 0
+                }
+            }.store(in: &subscribers)
+        
+        paginationInsetField
+            .numberPublisher
+            .sink { [weak self] number in
+                if let number {
+                    self?.component.paginationInset = number.cgFloatValue
+                } else {
+                    self?.component.paginationInset =  UIDevice.isIPad ? VDSLayout.space3X : VDSLayout.space2X
+                }
+            }.store(in: &subscribers)
+        
+        paginationFloatingSwitch.onChange = { [weak self] sender in
+            guard let self else { return }
+            self.component.pagination = .init(kind: paginationKindPickerSelectorView.selectedItem, floating: sender.isOn)
+        }
+        
+    }
+    
+    func setupModel() {
+        //setup UI
+        paginationDisplayPickerSelectorView.text = component.paginationDisplay.rawValue
+        peekPickerSelectorView.text = component.peek.rawValue
+        gutterPickerSelectorView.text = component.gutter.rawValue
+        layoutPickerSelectorView.text = component.layout.rawValue
+        paginationKindPickerSelectorView.text = ButtonIcon.Kind.lowContrast.rawValue
+        paginationFloatingSwitch.isOn = true
+        paginationInsetField.text = UIDevice.isIPad ? "12" : "8"
+        let onClick: (ButtonBase) -> Void = { button in print("\(button.text!) clicked")}
+        rows.append(Label().with { $0.text = "Offer you best deals on phones, tablets, home, internet and more. Pre order the new version mobiles and get off *T&C apply."; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Button().with{ $0.use = .secondary; $0.text = "Secondary"; $0.onClick =  onClick})
+        rows.append(Label().with { $0.text = "Get iPhone 15 on us. Online only. ";  $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Button().with{ $0.use = .primary; $0.text = "Primary"; $0.onClick =  onClick})
+        rows.append(Label().with { $0.text = "Unlimited plans. No trade-in required.";  $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Label().with { $0.text = "With trade-in. Any condition guaranteed";  $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Button().with{ $0.use = .primary; $0.text = "More"; $0.onClick =  onClick})
+        rows.append(Button().with{ $0.use = .secondary; $0.text = "Shop"; $0.onClick =  onClick})
+        rows.append(Button().with{ $0.use = .secondary; $0.text = "Buy"; $0.onClick =  onClick})
+        rows.append(Button().with{ $0.use = .secondary; $0.text = "Offer"; $0.onClick =  onClick})
+       
+        label.text = "0"
+        component.slotAlignment = .init(vertical: Carousel.Vertical.top, horizontal: Carousel.Horizontal.left)
+        horizAlignmtPickerSelectorView.text = Carousel.Horizontal.left.rawValue
+        vertAlignmtPickerSelectorView.text = Carousel.Vertical.top.rawValue
+       
+        updateCarousel()
+        
+        // Callback when moving the carousel. Returns selectedGroupIndex.
+        component.onChange = { [weak self] selectedGroupIndex in
+            guard let self else { return }
+            label.text = "\(selectedGroupIndex)"
+        }
+    }
+    
+    func updateCarousel() {
+        component.views = rows.compactMap({ view in
+            return TileContainer().with { instance in
+                instance.aspectRatio = .none
+                instance.addContentView(view)
+                instance.color = .custom(.lightGray)
+            }
+        })
+    }
+    
+    func setupPicker() {
+        surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.surface = item
+            self?.contentTopView.backgroundColor = item.color
+        }
+        
+        paginationDisplayPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.paginationDisplay = item
+            if (self?.component.peek == Carousel.Peek.none) && item == .none {
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.0) {
+                    self?.paginationDisplayPickerSelectorView.text = "persistent"
+                }
+            }
+        }
+        
+        peekPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.peek = item
+            if item == .none {
+                self?.paginationDisplayPickerSelectorView.text = "persistent"
+            } else if item == .minimum && UIDevice.isIPad {
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.0) {
+                    self?.peekPickerSelectorView.text = "standard"
+                }
+            } else if item == .standard && !UIDevice.isIPad && (self?.component.layout != CarouselScrollbar.Layout.oneUP) {
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.0) {
+                    self?.peekPickerSelectorView.text = "minimum"
+                }
+            }
+        }
+        
+        gutterPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.gutter = item
+            self?.updateCarousel()
+        }
+        
+        layoutPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            if item != .oneUP && !UIDevice.isIPad && self?.component.peek == Carousel.Peek.standard {
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.0) {
+                    self?.peekPickerSelectorView.text = "minimum"
+                }
+            }
+            self?.component.layout = item
+            self?.label.text = "0"
+            self?.updateCarousel()
+        }
+        
+        paginationKindPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            guard let self else { return }
+            self.component.pagination = .init(kind: item, floating: paginationFloatingSwitch.isOn)
+        }
+        
+        vertAlignmtPickerSelectorView.onPickerDidSelect = { [weak self] item in
+            guard let self else { return }
+            self.component.slotAlignment = .init(vertical: item, horizontal: horizAlignmtPickerSelectorView.selectedItem)
+        }
+        
+        horizAlignmtPickerSelectorView.onPickerDidSelect = { [weak self] item in
+            guard let self else { return }
+            self.component.slotAlignment = .init(vertical: vertAlignmtPickerSelectorView.selectedItem, horizontal: item)
+        }
+    }
+}
+
+extension CarouselViewController: ComponentSampleable {
+    static func makeSample() -> ComponentSample {
+        let c = Self()
+        c.setupModel()
+        return ComponentSample(component: c.component)
+    }
+}

VDSSample/ViewControllers/CheckBoxGroupViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 import Combine
 
 class  CheckboxGroupViewController: BaseViewController<CheckboxGroup> {
@@ -31,11 +31,11 @@ class  CheckboxGroupViewController: BaseViewController<CheckboxGroup> {
     override func setupForm(){
         super.setupForm()
         addActionRow()
-        addFormRow(label: "Disabled", view: disabledSwitch)
+        addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Label Text", view: labelTextField)
         addFormRow(label: "Child Text", view: childTextField)
-        addFormRow(label: "Error", view: showErrorSwitch)
+        addFormRow(label: "Error", view: showErrorSwitch, pinTrailing: false)
         
         showErrorSwitch.onChange = { [weak self] sender in
             self?.component.showError = sender.isOn
@@ -138,6 +138,6 @@ extension CheckboxGroupViewController: ComponentSampleable {
 
         component.selectorModels = [checkbox1, checkbox2]
 
-        return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
+        return ComponentSample(component: component)
     }
 }

VDSSample/ViewControllers/CheckboxItemViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 import Combine
 
 class  CheckboxItemViewController: BaseViewController<CheckboxItem> {
@@ -30,11 +30,11 @@ class  CheckboxItemViewController: BaseViewController<CheckboxItem> {
     override func setupForm(){
         super.setupForm()
         addActionRow()
-        addFormRow(label: "Disabled", view: disabledSwitch)
+        addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Label Text", view: labelTextField)
         addFormRow(label: "Child Text", view: childTextField)
-        addFormRow(label: "Error", view: showErrorSwitch)
+        addFormRow(label: "Error", view: showErrorSwitch, pinTrailing: false)
         addFormRow(label: "Error Text", view: errorTextField)
         
         showErrorSwitch.onChange = { [weak self] sender in
@@ -71,10 +71,19 @@ class  CheckboxItemViewController: BaseViewController<CheckboxItem> {
     }
     
     func setupModel() {
-        component.labelText = "Terms and conditions"
-        component.childText = "I agree to Verizon's terms and conditions click here"
+        let fullText = "I accept the Terms and Conditions"
+        let linkText = "Terms and Conditions"
         component.errorText = "Error Text"
-                
+        component.childText = fullText
+        
+        if let link = ActionLabelAttribute(text: fullText, linkText: linkText) {
+            link.action.sink { [weak self] in
+                guard let self else { return }
+                present(UIAlertController(title: "TextLink", message: "Clicked \(linkText)", preferredStyle: .alert).with{ $0.addAction(.init(title: "OK", style: .default)) }, animated: true)
+            }.store(in: &subscribers)
+            component.childTextAttributes = [link]
+        }
+
         //setup UI
         surfacePickerSelectorView.text = component.surface.rawValue
         disabledSwitch.isOn = !component.isEnabled
@@ -101,6 +110,6 @@ extension CheckboxItemViewController: ComponentSampleable {
         component.childText = "I agree to Verizon's terms and conditions click here"
         component.errorText = "Error Text"
 
-        return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
+        return ComponentSample(component: component)
     }
 }

VDSSample/ViewControllers/CheckboxViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 import Combine
 
 class  CheckboxViewController: BaseViewController<Checkbox> {
@@ -18,7 +18,7 @@ class  CheckboxViewController: BaseViewController<Checkbox> {
     let toggle = UISwitch()
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: .makeWrapper(for: component, edgeSpacing: 16.0), edgeSpacing: 0.0)
+        addContentTopView(view: component, pinTrailing: false)
         setupPicker()
         setupModel()
     }
@@ -26,10 +26,12 @@ class  CheckboxViewController: BaseViewController<Checkbox> {
     override func setupForm(){
         super.setupForm()
         addActionRow()
-        addFormRow(label: "Disabled", view: disabledSwitch)
+        addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
-        addFormRow(label: "Error", view: showErrorSwitch)
-        
+        addFormRow(label: "Error", view: showErrorSwitch, pinTrailing: false)
+        addFormRow(label: "Calendar", view: VDS.DatePicker().with {
+            $0.calendarModel = .init(minDate: Date().startOfMonth, maxDate: Calendar.current.date(byAdding: .month, value: 2, to: Date())!)
+        })
         showErrorSwitch.onChange = { [weak self] sender in
             guard let self else { return }
             self.component.showError = sender.isOn

VDSSample/ViewControllers/DatePickerViewController.swift

@@ -0,0 +1,491 @@
+//
+//  DatePickerViewController.swift
+//  VDSSample
+//
+//  Created by Matt Bruce on 4/11/24.
+//
+
+import Foundation
+import VDS
+import UIKit
+
+class DatePickerViewController: BaseViewController<DatePicker> {
+    
+    // Datepicker
+    var label = Label()
+    var disabledSwitch = Toggle()
+    var requiredSwitch = Toggle()
+    var labelTextField = TextField()
+    var errorTextField = TextField()
+    var helperTextField = TextField()
+    var inlineLabelSwitch = Toggle()
+    var readonlySwitch = Toggle()
+    var transparentBgSwitch = Toggle()
+    var errorSwitch = Toggle()
+    var widthTextField = NumericField()
+    var tooltipTitleTextField = TextField()
+    var tooltipContentTextField = TextField()
+    lazy var dateFormatPickerSelectorView = {
+        PickerSelectorView(title: "shortNumeric",
+                           picker: self.picker,
+                           items: DatePicker.DateFormat.allCases )
+    }()
+
+    // Calendar
+    //props
+    var indicators: [CalendarBase.CalendarIndicatorModel] = []
+    var activeDates: [Date] = []
+    var inactiveDates: [Date] = []
+    var minDate: Date = Date().startOfMonth
+    var maxDate: Date = Date().endOfMonth
+
+    //form
+    var containerBorderSwitch = Toggle()
+    var hideCurrentDateIndicatorSwitch = Toggle()
+    var indicatorOneSwitch = Toggle()
+    var indicatorTwoSwitch = Toggle()
+    var indicatorThreeSwitch = Toggle()
+    var clearActiveDatesSwitch = Toggle()
+    var clearInactiveDatesSwitch = Toggle()
+    var activeDatesField = TextField()
+    var inactiveDatesField = TextField()
+    var legendOneField = TextField()
+    var legendTwoField = TextField()
+    var legendThreeField = TextField()
+    
+    private var minDatePicker: UIDatePicker = UIDatePicker()
+    private var maxDatePicker: UIDatePicker = UIDatePicker()
+    private var indicatorOnePicker: UIDatePicker = UIDatePicker()
+    private var indicatorTwoPicker: UIDatePicker = UIDatePicker()
+    private var indicatorThreePicker: UIDatePicker = UIDatePicker()
+    private var activeDatePicker: UIDatePicker = UIDatePicker().with { $0.datePickerMode = .date }
+    private var inactiveDatePicker: UIDatePicker = UIDatePicker().with { $0.datePickerMode = .date }
+    
+    let indicatorOnePickerTag = 1
+    let indicatorTwoPickerTag = 2
+    let indicatorThreePickerTag = 3
+    let minDatePickerTag = 4
+    let maxDatePickerTag = 5
+    let activeDatePickerTag = 6
+    let inactiveDatePickerTag = 7
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        addContentTopView(view: component)
+        setupModel()
+        setupPicker()
+        setupCalendar()
+    }
+        
+    override func setupForm(){
+        addFormRow(label: "onChange", view: label)
+        addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
+        addFormRow(label: "Read Only", view: readonlySwitch, pinTrailing: false)
+        addFormRow(label: "Required", view: requiredSwitch, pinTrailing: false)
+        addFormRow(label: "Transparent Background", view: transparentBgSwitch, pinTrailing: false)
+        addFormRow(label: "Date Format", view: dateFormatPickerSelectorView)
+        addFormRow(label: "Label Text", view: labelTextField)
+        addFormRow(label: "Helper Text", view: helperTextField)
+        addFormRow(label: "Error", view: errorSwitch, pinTrailing: false)
+        addFormRow(label: "Error Text", view: errorTextField)
+        addFormRow(label: "Width", view: widthTextField)
+        addFormRow(label: "ToolTip Title", view: tooltipTitleTextField)
+        addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
+        append(section: getCalendarSection())
+        append(section: .init().with({
+            func datePicker() -> VDS.DatePicker {
+                VDS.DatePicker().with {
+                    $0.calendarModel = .init(minDate: Date().startOfMonth, maxDate: Calendar.current.date(byAdding: .month, value: 2, to: Date())!)
+                }
+            }
+            $0.title = "UI Testing"
+            $0.addFormRow(label: "Below Test", view: datePicker())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Above Test", view: datePicker())
+        }))
+
+        disabledSwitch.onChange = { [weak self] sender in
+            self?.component.isEnabled = !sender.isOn
+        }
+        
+        requiredSwitch.onChange = { [weak self] sender in
+            self?.component.isRequired = sender.isOn
+        }
+                
+        readonlySwitch.onChange = { [weak self] sender in
+            self?.component.isReadOnly = sender.isOn
+        }
+
+        transparentBgSwitch.onChange = { [weak self] sender in
+            self?.component.transparentBackground = sender.isOn
+        }
+
+        errorSwitch
+            .publisher(for: .valueChanged)
+            .sink { [weak self] sender in
+                guard let self else { return }
+                component.showError = sender.isOn
+                if component.showError != sender.isOn {
+                    self.errorSwitch.isOn = self.component.showError
+                }
+            }.store(in: &subscribers)
+        
+        labelTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.labelText = text
+            }.store(in: &subscribers)
+        
+        helperTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.helperText = text
+            }.store(in: &subscribers)
+        
+        errorTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.errorText = text
+            }.store(in: &subscribers)
+        
+        widthTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                self?.updateComponentConstraint(pinTrailing: number == nil)
+                self?.component.width = number?.cgFloatValue
+            }.store(in: &subscribers)
+
+        tooltipTitleTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.updateTooltip()
+            }.store(in: &subscribers)
+        
+        tooltipContentTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.updateTooltip()
+            }.store(in: &subscribers)
+    }
+    
+    func setupModel() {
+        component.selectedDate = Calendar.current.date(byAdding: .day, value: -5, to: Date())
+        component.labelText = "Date"
+        component.helperText = "Pick a date for your needs."
+        component.errorText = "Enter a date."
+        component.tooltipModel = .init(title: "Check your date.", content:"Here is the content for your date component")
+        
+        component.onChange = { [weak self] control in
+            self?.label.text = DateFormatter.localizedString(from: control.selectedDate!, dateStyle: .short, timeStyle: .none)
+        }
+        
+        //setup UI
+        disabledSwitch.isOn = !component.isEnabled
+        requiredSwitch.isOn = component.isRequired
+        surfacePickerSelectorView.text = component.surface.rawValue
+        labelTextField.text = component.labelText
+        helperTextField.text = component.helperText
+        readonlySwitch.isOn = false
+        transparentBgSwitch.isOn = false
+        errorSwitch.isOn = component.showError
+        errorTextField.text = component.errorText
+        tooltipTitleTextField.text = component.tooltipModel?.title
+        tooltipContentTextField.text = component.tooltipModel?.content
+    }
+    
+    func setupPicker() {
+        surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.surface = item
+            self?.contentTopView.backgroundColor = item.color
+        }
+        
+        dateFormatPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.dateFormat = item
+        }
+
+    }
+    
+    func updateTooltip() {
+        let title = tooltipTitleTextField.text ?? ""
+        let content = tooltipContentTextField.text ?? ""
+        
+        component.tooltipModel = !title.isEmpty || !content.isEmpty ? .init(title: title,
+                                                                            content: content) : nil
+    }
+}
+
+extension DatePickerViewController {
+    
+    func getCalendarSection() -> FormSection {
+        let section = FormSection()
+        section.title = "Calendar Options"
+        section.addFormRow(label: "Hide Container Border", view: containerBorderSwitch, pinTrailing: false)
+        section.addFormRow(label: "Hide Current Date Indicator", view: hideCurrentDateIndicatorSwitch, pinTrailing: false)
+        section.addFormRow(label: "Min Date", view: minDatePicker)
+        section.addFormRow(label: "Max Date", view: maxDatePicker)
+        section.addFormRow(label: "Active Dates", view: activeDatesField)
+        section.addFormRow(label: "Select ActiveDate", view: activeDatePicker)
+        section.addFormRow(label: "Clear Active Dates", view: clearActiveDatesSwitch, pinTrailing: false)
+        section.addFormRow(label: "Inactive Dates", view: inactiveDatesField)
+        section.addFormRow(label: "Select InActiveDate", view: inactiveDatePicker)
+        section.addFormRow(label: "Clear Inactive Dates", view: clearInactiveDatesSwitch, pinTrailing: false)
+        section.addFormRow(label: "Indicator One", view: indicatorOneSwitch, pinTrailing: false)
+        section.addFormRow(label: "Indicator Two", view: indicatorTwoSwitch, pinTrailing: false)
+        section.addFormRow(label: "Indicator Three", view: indicatorThreeSwitch, pinTrailing: false)
+        section.addFormRow(label: "Legend One", view: legendOneField)
+        section.addFormRow(label: "Legend Two", view: legendTwoField)
+        section.addFormRow(label: "Legend Three", view: legendThreeField)
+        section.addFormRow(label: "Indicator One Date", view: indicatorOnePicker)
+        section.addFormRow(label: "Indicator Two Date", view: indicatorTwoPicker)
+        section.addFormRow(label: "Indicator Three Date", view: indicatorThreePicker)
+                
+        containerBorderSwitch.onChange = { [weak self] sender in
+            self?.updateCalendarModel()
+        }
+        
+        hideCurrentDateIndicatorSwitch.onChange = { [weak self] sender in
+            self?.updateCalendarModel()
+        }
+        
+        clearActiveDatesSwitch.onChange = { [weak self] sender in
+            self?.updateCalendarModel()
+        }
+        
+        clearInactiveDatesSwitch.onChange = { [weak self] sender in
+            self?.updateCalendarModel()
+        }
+        
+        legendOneField
+            .textPublisher
+            .sink {
+                [weak self] text in
+                self?.updateIndicatorData(label: text, date: self?.indicatorOnePicker.date, index: 0)
+            }.store(in: &subscribers)
+        
+        legendTwoField
+            .textPublisher
+            .sink {
+                [weak self] text in
+                self?.updateIndicatorData(label: text, date: self?.indicatorTwoPicker.date, index: 1)
+            }.store(in: &subscribers)
+        
+        legendThreeField
+            .textPublisher
+            .sink {
+                [weak self] text in
+                self?.updateIndicatorData(label: text, date: self?.indicatorThreePicker.date, index: 2)
+            }.store(in: &subscribers)
+        
+        indicatorOneSwitch.onChange = { [weak self] sender in
+            guard let self else { return }
+            if !sender.isOn {
+                self.indicators.removeAll()
+            } else {
+                self.setIndicatorsData()
+            }
+            self.updateCalendarModel()
+        }
+        
+        indicatorTwoSwitch.onChange =  { [weak self] sender in
+            guard let self else { return }
+            if !sender.isOn {
+                if self.indicators.count > 2 {
+                    self.indicators.removeLast()
+                    self.indicators.removeLast()
+                } else if self.indicators.count == 2 {
+                    self.indicators.removeLast()
+                }
+            } else {
+                self.setIndicatorsData()
+            }
+            self.updateCalendarModel()
+        }
+        
+        indicatorThreeSwitch.onChange = { [weak self] sender in
+            guard let self else { return }
+            if !sender.isOn {
+                if self.indicators.count > 2 {
+                    self.indicators.removeLast()
+                }
+            } else {
+                self.setIndicatorsData()
+            }
+            self.updateCalendarModel()
+        }
+        
+        return section
+    }
+    
+    func updateCalendarModel() {
+        component.calendarModel = .init(hideContainerBorder: containerBorderSwitch.isOn,
+                                        hideCurrentDateIndicator: hideCurrentDateIndicatorSwitch.isOn,
+                                        activeDates: activeDates,
+                                        inactiveDates: inactiveDates,
+                                        minDate: minDate,
+                                        maxDate: maxDate,
+                                        indicators: indicators)
+    }
+    
+    func setupCalendar() {
+        configurePicker(indicatorOnePicker)
+        indicatorOnePicker.tag = indicatorOnePickerTag
+        configurePicker(indicatorTwoPicker)
+        indicatorTwoPicker.tag = indicatorTwoPickerTag
+        configurePicker(indicatorThreePicker)
+        indicatorThreePicker.tag = indicatorThreePickerTag
+        configurePicker(minDatePicker)
+        minDatePicker.tag = minDatePickerTag
+        configurePicker(maxDatePicker)
+        maxDatePicker.tag = maxDatePickerTag
+        configurePicker(activeDatePicker)
+        activeDatePicker.tag = activeDatePickerTag
+        configurePicker(inactiveDatePicker)
+        inactiveDatePicker.tag = inactiveDatePickerTag
+        indicators = [
+            .init(label: "Due Date", date: indicatorOnePicker.date),
+            .init(label: "Auto Pay", date: indicatorTwoPicker.date),
+            .init(label: "Scheduled", date: indicatorThreePicker.date)
+        ]
+        
+        let calendar = Calendar.current
+        let indicatorDate = calendar.startOfDay(for: calendar.date(byAdding: .day, value: 1, to: Date())!)
+        legendOneField.text = "Due Date"
+        legendTwoField.text = "Auto Pay"
+        legendThreeField.text = "Scheduled"
+        indicatorOneSwitch.isOn = true
+        indicatorTwoSwitch.isOn = true
+        indicatorThreeSwitch.isOn = true
+        hideCurrentDateIndicatorSwitch.isOn = false
+        indicatorOnePicker.date = indicatorDate
+        indicatorTwoPicker.date = indicatorDate
+        indicatorThreePicker.date = indicatorDate
+        updateIndicatorData(label: legendOneField.text ?? "", date: indicatorOnePicker.date, index: 0)
+        updateIndicatorData(label: legendTwoField.text ?? "", date: indicatorTwoPicker.date, index: 1)
+        updateIndicatorData(label: legendThreeField.text ?? "", date: indicatorThreePicker.date, index: 2)
+        
+        activeDatesField.isUserInteractionEnabled = false
+        inactiveDatesField.isUserInteractionEnabled = false
+        activeDatesField.isEnabled = false
+        inactiveDatesField.isEnabled = false
+        
+        minDatePicker.date = minDate
+        maxDatePicker.date = maxDate
+
+        updateCalendarModel()
+    }
+    
+    func updateIndicatorData(label: String = "", date: Date?, index:Int) {
+        indicators[index].label = label
+        indicators[index].date = date ?? Date()
+        updateCalendarModel()
+    }
+    
+    func setIndicatorsData() {
+        if indicatorOneSwitch.isOn && indicatorTwoSwitch.isOn && indicatorThreeSwitch.isOn {
+            indicators = [
+                .init(label: self.legendOneField.text ?? "", date: indicatorOnePicker.date),
+                .init(label: self.legendTwoField.text ?? "", date: indicatorTwoPicker.date),
+                .init(label: self.legendThreeField.text ?? "", date: indicatorThreePicker.date)
+            ]
+        } else if indicatorOneSwitch.isOn && indicatorTwoSwitch.isOn && !indicatorThreeSwitch.isOn {
+            indicators = [
+                .init(label: self.legendOneField.text ?? "", date: indicatorOnePicker.date),
+                .init(label: self.legendTwoField.text ?? "", date: indicatorTwoPicker.date),
+            ]
+            
+        } else if indicatorOneSwitch.isOn && !indicatorTwoSwitch.isOn {
+            indicators = [
+                .init(label: self.legendOneField.text ?? "", date: indicatorOnePicker.date),
+            ]
+        }
+    }
+    
+    func configurePicker(_ sender:UIDatePicker) {
+        // Set some of UIDatePicker properties
+        sender.timeZone = NSTimeZone.local
+        sender.backgroundColor = UIColor.white
+        
+        // Add an event to call onDidChangeDate function when value is changed.
+        sender.addTarget(self, action: #selector(self.datePickerValueChanged(_:)), for: .valueChanged)
+    }
+    
+    @objc func datePickerValueChanged(_ sender: UIDatePicker){
+                        
+        switch sender.tag {
+        case indicatorOnePickerTag:
+            updateIndicatorData(label: legendOneField.text ?? "", date: sender.date, index: 0)
+        case indicatorTwoPickerTag:
+            updateIndicatorData(label: legendTwoField.text ?? "", date: sender.date, index: 1)
+        case indicatorThreePickerTag:
+            updateIndicatorData(label: legendThreeField.text ?? "", date: sender.date, index: 2)
+        case minDatePickerTag:
+            minDate = sender.date
+            updateCalendarModel()
+        case maxDatePickerTag:
+            maxDate = sender.date
+            updateCalendarModel()
+        case activeDatePickerTag:
+            activeDates.append(sender.date)
+            var text = activeDatesField.text
+            if let textEmpty = text?.isEmpty, textEmpty == true {
+                text?.append("")
+            } else {
+                text?.append(", ")
+            }
+            text?.append("\(self.getSelectedDate(with: sender.date))")
+            clearActiveDatesSwitch.isOn = false
+            activeDatesField.text = text
+            updateCalendarModel()
+        case inactiveDatePickerTag:
+            inactiveDates.append(sender.date)
+            var text = inactiveDatesField.text
+            if let textEmpty = text?.isEmpty, textEmpty == true {
+                text?.append("")
+            } else {
+                text?.append(", ")
+            }
+            text?.append("\(self.getSelectedDate(with: sender.date))")
+            clearInactiveDatesSwitch.isOn = false
+            inactiveDatesField.text = text
+            updateCalendarModel()
+        default: break
+        }
+    }
+    
+    func getSelectedDate(with date:Date) -> String {
+        let dateFormatter: DateFormatter = DateFormatter()
+        dateFormatter.dateFormat = "MM/dd/yyyy"
+        let day: String = dateFormatter.string(from: date)
+        return day
+    }
+
+}
+
+extension DatePickerViewController: ComponentSampleable {
+    static func makeSample() -> ComponentSample {
+        let c = Self()
+        c.setupModel()
+        c.setupCalendar()
+        return ComponentSample(component: c.component)
+    }
+}

VDSSample/ViewControllers/DropShawdowViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 import Combine
 
 class DropShadowViewController: BaseViewController<ShadowView> {

VDSSample/ViewControllers/DropdownSelectViewController.swift

@@ -10,6 +10,12 @@ import VDS
 
 class DropdownSelectViewController: BaseViewController<DropdownSelect> {
     
+    lazy var helperTextPlacementPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: InputField.HelperTextPlacement.allCases)
+    }()
+
     var disabledSwitch = Toggle()
     var requiredSwitch = Toggle()
     var labelTextField = TextField()
@@ -21,6 +27,7 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
     var errorSwitch = Toggle()
     var tooltipTitleTextField = TextField()
     var tooltipContentTextField = TextField()
+    var widthTextField = NumericField()
     var optionsSwitch = Toggle()
     var moreOptions: [DropdownSelect.DropdownOptionModel] = [
         .init(text: "Alabama"),
@@ -57,18 +64,20 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
         
     override func setupForm(){
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
-        addFormRow(label: "Disabled", view: disabledSwitch)
-        addFormRow(label: "Required", view: requiredSwitch)
+        addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
+        addFormRow(label: "Read Only", view: readonlySwitch, pinTrailing: false)
+        addFormRow(label: "Required", view: requiredSwitch, pinTrailing: false)
+        addFormRow(label: "Transparent Background", view: transparentBgSwitch, pinTrailing: false)
         addFormRow(label: "Label Text", view: labelTextField)
+        addFormRow(label: "Helper Text Placement", view: helperTextPlacementPickerSelectorView)
         addFormRow(label: "Helper Text", view: helperTextField)
-        addFormRow(label: "Inline Label", view: .makeWrapper(for: inlineLabelSwitch))
-        addFormRow(label: "Readonly", view: readonlySwitch)
-        addFormRow(label: "Transparent Background", view: transparentBgSwitch)
-        addFormRow(label: "Error", view: .makeWrapper(for: errorSwitch))
+        addFormRow(label: "Inline Label", view: inlineLabelSwitch, pinTrailing: false)
+        addFormRow(label: "Error", view: errorSwitch, pinTrailing: false)
         addFormRow(label: "Error Text", view: errorTextField)
+        addFormRow(label: "Width", view: widthTextField)
         addFormRow(label: "ToolTip Title", view: tooltipTitleTextField)
         addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
-        addFormRow(label: "More Options", view: optionsSwitch)
+        addFormRow(label: "More Options", view: optionsSwitch, pinTrailing: false)
 
         disabledSwitch.onChange = { [weak self] sender in
             self?.component.isEnabled = !sender.isOn
@@ -119,6 +128,13 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
                 self?.component.errorText = text
             }.store(in: &subscribers)
         
+        widthTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                self?.updateComponentConstraint(pinTrailing: number == nil)
+                self?.component.width = number?.cgFloatValue
+            }.store(in: &subscribers)
+
         tooltipTitleTextField
             .textPublisher
             .sink { [weak self] text in
@@ -147,10 +163,6 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
         component.options = moreOptions
         
         /// callback to know which option chose
-        component.onItemSelected = { index, option in
-            print("selected index: \(index) text: \(option.text) value: \(option.value)")
-        }
-        
         component.onChange = { dropdown in
             guard let option = dropdown.selectedItem, let index = dropdown.selectId else { print("nothing selected"); return }
             print("selected index: \(index) text: \(option.text) value: \(option.value)")
@@ -161,6 +173,7 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
         requiredSwitch.isOn = component.isRequired
         surfacePickerSelectorView.text = component.surface.rawValue
         labelTextField.text = component.labelText
+        helperTextPlacementPickerSelectorView.text = component.helperTextPlacement.rawValue
         helperTextField.text = component.helperText
         readonlySwitch.isOn = false
         transparentBgSwitch.isOn = false
@@ -176,6 +189,11 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
             self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
+        
+        helperTextPlacementPickerSelectorView.onPickerDidSelect = { [weak self] item in
+            self?.component.helperTextPlacement = item
+        }
+
     }
     
     func updateTooltip() {

VDSSample/ViewControllers/FootnoteGroupViewController.swift

@@ -0,0 +1,79 @@
+//
+//  FootnoteGroupViewController.swift
+//  VDSSample
+//
+//  Created by Kanamarlapudi, Vasavi on 29/08/24.
+//
+
+import Foundation
+import UIKit
+import VDS
+
+class FootnoteGroupViewController: BaseViewController<FootnoteGroup> {
+  
+    var widthTextField = NumericField()
+    var percentageTextField = NumericField()
+    var footnotes: [FootnoteItem] = []
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        addContentTopView(view: component)
+        setupPicker()
+        setupModel()
+    }
+    
+    override func setupForm() {
+        super.setupForm()
+        addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Width", view: widthTextField)
+        addFormRow(label: "Percentage (1-100)", view: percentageTextField)
+        
+        widthTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                self?.updateComponentConstraint(pinTrailing: number == nil)
+                if let number {
+                    self?.component.width = .value(number.cgFloatValue)
+                    self?.percentageTextField.text = ""
+                } else {
+                    self?.component.width = nil
+                }
+            }.store(in: &subscribers)
+        
+        percentageTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                self?.updateComponentConstraint(pinTrailing: number == nil)
+                if let number, number.intValue > 9 {
+                    self?.component.width = .percentage(number.cgFloatValue)
+                    self?.widthTextField.text = ""
+                } else {
+                    self?.component.width = nil
+                }
+            }.store(in: &subscribers)
+        
+    }
+    
+    func setupModel() {        
+        let toolTipModel = Tooltip.TooltipModel.init(title: "Check your item.", content:"Here is the content for your item.")
+        footnotes.append(.init().with { $0.text = "Offer you best deals on phones, tablets, home, internet and more. Pre order the new version mobiles and get off *T&C apply."; $0.symbolType = "*"; $0.kind = .primary; $0.tooltipModel = toolTipModel})
+        footnotes.append(.init().with { $0.text = "The display has rounded corners. When measured as a standard rectangular shape, the screen is 6.68 inches diagonally. Actual viewable area is less."; $0.symbolType = "**"; $0.kind = .primary})
+        footnotes.append(.init().with { $0.text = "Some features may not be available for all countries or all areas."; $0.symbolType = "1."; $0.kind = .primary})
+        component.footnoteItems = footnotes
+    }
+    
+    func setupPicker() {
+        surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.surface = item
+            self?.contentTopView.backgroundColor = item.color
+        }
+    }
+}
+
+extension FootnoteGroupViewController: ComponentSampleable {
+    static func makeSample() -> ComponentSample {
+        let c = Self()
+        c.setupModel()
+        return ComponentSample(component: c.component)
+    }
+}

VDSSample/ViewControllers/FootnoteItemViewController.swift

@@ -0,0 +1,176 @@
+//
+//  FootnoteViewController.swift
+//  VDSSample
+//
+//  Created by Kanamarlapudi, Vasavi on 21/08/24.
+//
+
+import Foundation
+import UIKit
+import VDS
+
+class FootnoteItemViewController: BaseViewController<FootnoteItem> {
+    
+    internal enum SymbolType: String, DefaultValuing, CaseIterable {
+            case asterisk
+            case doubleAsterisk
+            case character
+            case none
+    
+            public static var defaultValue: Self { .asterisk }
+    
+            /// TextStyle relative to Size.
+            public var text: String {
+                switch self {
+                case .asterisk:
+                    return "*"
+                case .doubleAsterisk:
+                    return  "**"
+                case .character:
+                    return "1."
+                case .none:
+                    return ""
+                }
+            }
+        }
+    
+    lazy var kindPickerSelectorView = {
+        PickerSelectorView(title: "secondary",
+                           picker: self.picker,
+                           items: FootnoteItem.Kind.allCases)
+    }()
+    
+    lazy var symbolTypePickerSelectorView = {
+        PickerSelectorView(title: "asterisk",
+                           picker: self.picker,
+                           items: SymbolType.allCases)
+    }()
+
+    lazy var sizePickerSelectorView = {
+        PickerSelectorView(title: "micro",
+                           picker: self.picker,
+                           items: FootnoteItem.Size.allCases)
+    }()
+
+    var hideSymbolSwitch = Toggle()
+    var footnoteTextField = TextField()
+    var widthTextField = NumericField()
+    var percentageTextField = NumericField()
+    var tooltipTitleTextField = TextField()
+    var tooltipContentTextField = TextField()
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        addContentTopView(view: component)
+        setupPicker()
+        setupModel()
+    }
+    
+    override func setupForm() {
+        super.setupForm()
+        addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Kind", view: kindPickerSelectorView)
+        addFormRow(label: "Size", view: sizePickerSelectorView)
+        addFormRow(label: "Symbol Type", view: symbolTypePickerSelectorView)
+        addFormRow(label: "Hide Symbol", view: hideSymbolSwitch, pinTrailing: false)
+        addFormRow(label: "Text", view: footnoteTextField)
+        addFormRow(label: "Width", view: widthTextField)
+        addFormRow(label: "Percentage (1-100)", view: percentageTextField)
+        addFormRow(label: "ToolTip Title", view: tooltipTitleTextField)
+        addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
+                
+        hideSymbolSwitch.publisher(for: .valueChanged).sink { [weak self] control in
+            self?.component.hideSymbol = control.isOn
+        }.store(in: &subscribers)
+        
+        footnoteTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.text = text
+            }.store(in: &subscribers)
+        
+        widthTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                self?.updateComponentConstraint(pinTrailing: number == nil)
+                if let number {
+                    self?.component.width = .value(number.cgFloatValue)
+                    self?.percentageTextField.text = ""
+                } else {
+                    self?.component.width = nil
+                }
+            }.store(in: &subscribers)
+        
+        percentageTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                self?.updateComponentConstraint(pinTrailing: number == nil)
+                if let number, number.intValue > 9 {
+                    self?.component.width = .percentage(number.cgFloatValue)
+                    self?.widthTextField.text = ""
+                } else {
+                    self?.component.width = nil
+                }
+            }.store(in: &subscribers)
+        
+        tooltipTitleTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.updateTooltip()
+            }.store(in: &subscribers)
+
+        tooltipContentTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.updateTooltip()
+            }.store(in: &subscribers)
+    }
+    
+    func setupModel() {
+        component.text = "Service is included for free for two years with activation of any iPhone15 model. Connection and response times vary based on location, site conditions, and other factors. See support.apple.com/en-us/HT213885 for more information."
+        component.tooltipModel = nil
+
+        footnoteTextField.text = component.text
+        sizePickerSelectorView.text = component.size.rawValue
+        kindPickerSelectorView.text = component.kind.rawValue
+        symbolTypePickerSelectorView.text = SymbolType.defaultValue.text
+        tooltipTitleTextField.text = component.tooltipModel?.title
+        tooltipContentTextField.text = component.tooltipModel?.content
+    }
+    
+    func setupPicker() {
+        surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.surface = item
+            self?.contentTopView.backgroundColor = item.color
+        }
+        
+        kindPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.kind = item
+        }
+        
+        sizePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.size = item
+        }
+        
+        symbolTypePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.symbolType = item.text
+        }
+    }
+    
+    func updateTooltip() {
+        let title = tooltipTitleTextField.text ?? ""
+        let content = tooltipContentTextField.text ?? ""
+        
+        component.tooltipModel = !title.isEmpty || !content.isEmpty ? .init(title: title,
+                                                                            content: content) : nil
+    }
+    
+}
+
+extension FootnoteItemViewController: ComponentSampleable {
+    static func makeSample() -> ComponentSample {
+        let c = Self()
+        c.setupModel()
+        return ComponentSample(component: c.component)
+    }
+}

VDSSample/ViewControllers/IconViewController.swift

@@ -8,15 +8,54 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 import Combine
 
 class IconViewController: BaseViewController<Icon> {
+    enum IconColor: String, CaseIterable {
+        case `default`, token, custom
+    }
     
-    lazy var colorPickerSelectorView = {
-        PickerSelectorView(title: "",
-                           picker: self.picker,
-                           items: UIColor.VDSColor.allCases)
+    lazy var lightColorPickerSelectorView : TokenColorPickerSection  = {
+        TokenColorPickerSection<IconColor>(rowTitle: "Light Color",
+                                picker: self.picker).with {
+            $0.onSelected = { [weak self] color in
+                guard let self else { return }
+                light = .black
+                setColorConfiguration()
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                light = color.uiColor
+                setColorConfiguration()
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                light = color
+                setColorConfiguration()
+            }
+        }
+    }()
+
+    lazy var darkColorPickerSelectorView: TokenColorPickerSection  = {
+        TokenColorPickerSection<IconColor>(rowTitle: "Dark Color",
+                                picker: self.picker).with {
+            $0.onSelected = { [weak self] color in
+                guard let self else { return }
+                dark = .white
+                setColorConfiguration()
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                dark = color.uiColor
+                setColorConfiguration()
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                dark = color
+                setColorConfiguration()
+            }
+        }
     }()
     
     lazy var namePickerSelectorView = {
@@ -35,7 +74,7 @@ class IconViewController: BaseViewController<Icon> {
     
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: .makeWrapper(for: component))
+        addContentTopView(view: component, pinTrailing: false)
         setupPicker()
         setupModel()
     }
@@ -45,7 +84,8 @@ class IconViewController: BaseViewController<Icon> {
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Size", view: sizePickerSelectorView)
         addFormRow(label: "Custom Size", view: customSizeField)
-        addFormRow(label: "Color", view: colorPickerSelectorView)
+        append(section: lightColorPickerSelectorView)
+        append(section: darkColorPickerSelectorView)
         addFormRow(label: "Name", view: namePickerSelectorView)
         
         customSizeField
@@ -57,14 +97,11 @@ class IconViewController: BaseViewController<Icon> {
     
     func setupModel() {
         let name = Icon.Name.accessibility
-        let color = UIColor.VDSColor.paletteBlack
-        component.color = color.uiColor
         component.name = name
         
         //setup UI
         surfacePickerSelectorView.text = component.surface.rawValue
         sizePickerSelectorView.text = component.size.rawValue
-        colorPickerSelectorView.text = color.rawValue
         namePickerSelectorView.text = name.rawValue
     }
     func setupPicker(){
@@ -77,15 +114,18 @@ class IconViewController: BaseViewController<Icon> {
         sizePickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.size = item
         }
-        
-        colorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.color = item.uiColor
-        }
-        
+                
         namePickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.name = item
         }
     }
+    
+    var light: UIColor = .black
+    var dark: UIColor = .white
+    func setColorConfiguration() {
+        component.colorConfiguration = .init(light, dark)
+    }
+
 }
 
 extension IconViewController: ComponentSampleable {

VDSSample/ViewControllers/InputFieldViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 import Combine
 
 class  InputFieldViewController: BaseViewController<InputField> {
@@ -27,6 +27,8 @@ class  InputFieldViewController: BaseViewController<InputField> {
 
     var disabledSwitch = Toggle()
     var requiredSwitch = Toggle()
+    var readonlySwitch = Toggle()
+    var transparentBgSwitch = Toggle()
     var labelTextField = TextField()
     var errorTextField = TextField()
     var successTextField = TextField()
@@ -62,6 +64,27 @@ class  InputFieldViewController: BaseViewController<InputField> {
         $0.isHidden = true
     }
 
+    //inlineAction
+    var inlineActionTextField = TextField()
+    lazy var inlineActionSection = FormSection().with {
+        $0.title = "inlineAction Settings"
+        $0.addFormRow(label: "Action Text", view: inlineActionTextField)
+        $0.isHidden = true
+    }
+    
+    //securityCode
+    lazy var cardTypePickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: InputField.CreditCardType.allCases)
+    }()
+    
+    lazy var securityCodeSection = FormSection().with {
+        $0.title = "Security Code Settings"
+        $0.addFormRow(label: "Card Type", view: cardTypePickerSelectorView)
+        $0.isHidden = true
+    }
+    
     override func viewDidLoad() {
         super.viewDidLoad()
         addContentTopView(view: component)
@@ -71,23 +94,39 @@ class  InputFieldViewController: BaseViewController<InputField> {
         
     override func setupForm(){
         super.setupForm()  
-        addFormRow(label: "Disabled", view: disabledSwitch)
-        addFormRow(label: "Required", view: requiredSwitch)
-        addFormRow(label: "Surface", view: surfacePickerSelectorView)
-        addFormRow(label: "Label Text", view: labelTextField)
-        addFormRow(label: "Helper Text Placement", view: helperTextPlacementPickerSelectorView)
-        addFormRow(label: "Helper Text", view: helperTextField)
-        addFormRow(label: "Error", view: showErrorSwitch)
-        addFormRow(label: "Error Text", view: errorTextField)
-        addFormRow(label: "Success", view: showSuccessSwitch)
-        addFormRow(label: "Success Text", view: successTextField)
-        addFormRow(label: "Width", view: widthTextField)
-        addFormRow(label: "ToolTip Title", view: tooltipTitleTextField)
-        addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
-        addFormRow(label: "Field Type", view: inputTypePickerSelectorView)
         
+
+        let fieldType = FormSection().with {
+            $0.title = "Field Type Settings"
+            $0.addFormRow(label: "Field Type", view: inputTypePickerSelectorView)
+        }
+        
+        let general = FormSection().with {
+            $0.title = "\n\nGeneral Settings"
+        }
+        
+        general.addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        general.addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
+        general.addFormRow(label: "Read Only", view: readonlySwitch, pinTrailing: false)
+        general.addFormRow(label: "Required", view: requiredSwitch, pinTrailing: false)
+        general.addFormRow(label: "Transparent Background", view: transparentBgSwitch, pinTrailing: false)
+        general.addFormRow(label: "Label Text", view: labelTextField)
+        general.addFormRow(label: "Helper Text Placement", view: helperTextPlacementPickerSelectorView)
+        general.addFormRow(label: "Helper Text", view: helperTextField)
+        general.addFormRow(label: "Error", view: showErrorSwitch, pinTrailing: false)
+        general.addFormRow(label: "Error Text", view: errorTextField)
+        general.addFormRow(label: "Success", view: showSuccessSwitch, pinTrailing: false)
+        general.addFormRow(label: "Success Text", view: successTextField)
+        general.addFormRow(label: "Width", view: widthTextField)
+        general.addFormRow(label: "ToolTip Title", view: tooltipTitleTextField)
+        general.addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
+        
+        append(section: fieldType)
         append(section: passwordSection)
         append(section: dateSection)
+        append(section: inlineActionSection)
+        append(section: securityCodeSection)
+        append(section: general)
 
         requiredSwitch.onChange = { [weak self] sender in
             self?.component.isRequired = sender.isOn
@@ -112,6 +151,14 @@ class  InputFieldViewController: BaseViewController<InputField> {
         disabledSwitch.onChange = { [weak self] sender in
             self?.component.isEnabled = !sender.isOn
         }
+        
+        readonlySwitch.onChange = { [weak self] sender in
+            self?.component.isReadOnly = sender.isOn
+        }
+
+        transparentBgSwitch.onChange = { [weak self] sender in
+            self?.component.transparentBackground = sender.isOn
+        }
 
         labelTextField
             .textPublisher
@@ -134,6 +181,7 @@ class  InputFieldViewController: BaseViewController<InputField> {
         widthTextField
             .numberPublisher
             .sink { [weak self] number in
+                self?.updateComponentConstraint(pinTrailing: number == nil)
                 self?.component.width = number?.cgFloatValue
             }.store(in: &subscribers)
         
@@ -162,16 +210,29 @@ class  InputFieldViewController: BaseViewController<InputField> {
             .sink { [weak self] text in
                 self?.component.showPasswordButtonText = text
             }.store(in: &subscribers)
+        
+        //inlineAction
+        inlineActionTextField
+            .textPublisher
+            .sink { [weak self] text in
+                if !text.isEmpty {
+                    self?.component.actionTextLinkModel = .init(text: text, onClick: { inputField in
+                        var value = inputField.value ?? ""
+                        value = !value.isEmpty ? value : "nil"
+                        self?.present(UIAlertController(title: "inlineAction", message: "Clicked and you get the value: \(value)", preferredStyle: .alert).with{ $0.addAction(.init(title: "OK", style: .default)) }, animated: true)
+                    })
+                } else {
+                    self?.component.actionTextLinkModel = nil
+                }
+            }.store(in: &subscribers)
     }
     
     func setupModel() {
         component.fieldType = .text
-        component.width = 328
         component.labelText = "Street Address"
         component.helperText = "For example: 123 Verizon St"
         component.errorText = "Enter a valid address."
         component.successText = "Good job entering a valid address!"
-        component.tooltipModel = .init(title: "Check the formatting of your address", content:"House/Building number then street name")
 
         component.onChange = { component in
             if let text = component.value {
@@ -184,6 +245,7 @@ class  InputFieldViewController: BaseViewController<InputField> {
         //setup UI
         surfacePickerSelectorView.text = component.surface.rawValue
         helperTextPlacementPickerSelectorView.text = component.helperTextPlacement.rawValue
+        dateFormatPickerSelectorView.text = component.dateFormat.rawValue
         inputTypePickerSelectorView.text = component.fieldType.rawValue
         disabledSwitch.isOn = !component.isEnabled
         requiredSwitch.isOn = component.isRequired
@@ -213,6 +275,7 @@ class  InputFieldViewController: BaseViewController<InputField> {
         
         inputTypePickerSelectorView.onPickerDidSelect = { [weak self] item in
             self?.component.fieldType = item
+            self?.component.text = ""
             self?.updateFormSections()
         }
         
@@ -220,6 +283,10 @@ class  InputFieldViewController: BaseViewController<InputField> {
             self?.component.dateFormat = item
             self?.updateFormSections()
         }
+        
+        cardTypePickerSelectorView.onPickerDidSelect = { [weak self] item in
+            self?.component.cardType = item
+        }
     }
     
     func updateTooltip() {
@@ -231,33 +298,30 @@ class  InputFieldViewController: BaseViewController<InputField> {
     }
     
     func updateFormSections() {
-        [passwordSection, dateSection].forEach { $0.isHidden = true }
+        [passwordSection, dateSection, inlineActionSection, securityCodeSection].forEach { $0.isHidden = true }
+        //reset other fields
+        component.actionTextLinkModel = nil
+        component.tooltipModel = nil
+        component.cardType = .placeholder
+        tooltipTitleTextField.text = nil
+        tooltipContentTextField.text = nil
+        dateFormatPickerSelectorView.text = component.dateFormat.rawValue
+        cardTypePickerSelectorView.text = component.cardType.rawValue
         switch component.fieldType {
-        case .text:
-            break
-            
-        case .number:
-            break
-            
         case .inlineAction:
-            break
-            
+            inlineActionTextField.text = nil
+            inlineActionSection.isHidden = false
+
         case .password:
             passwordSection.isHidden = false
             
-        case .creditCard:
-            break
-            
-        case .tel:
-            break
-            
         case .date:
             dateSection.isHidden = false
             
         case .securityCode:
-            break
+            securityCodeSection.isHidden = false
             
-        @unknown default:
+        default:
             break
         }
     }
@@ -266,14 +330,8 @@ class  InputFieldViewController: BaseViewController<InputField> {
 
 extension InputFieldViewController: ComponentSampleable {
     static func makeSample() -> ComponentSample {
-        let component = Self.makeComponent()
-        component.fieldType = .text
-        component.width = 328
-        component.labelText = "Street Address"
-        component.helperText = "For example: 123 Verizon St"
-        component.errorText = "Enter a valid address."
-        component.successText = "Good job entering a valid address!"
-        component.tooltipModel = .init(title: "Check the formatting of your address", content: "House/Building number then street name")
-        return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
+        let c = Self()
+        c.setupModel()
+        return ComponentSample(component: c.component)
     }
 }

VDSSample/ViewControllers/InputStepperViewController.swift

@@ -0,0 +1,265 @@
+//
+//  InputStepperViewController.swift
+//  VDSSample
+//
+//  Created by Kanamarlapudi, Vasavi on 24/06/24.
+//
+
+import Foundation
+import UIKit
+import VDS
+import VDSCoreTokens
+import Combine
+
+class InputStepperViewController: BaseViewController<InputStepper> {
+
+    var controlWidthTextField = TextField()
+    var controlWidthPercentageTextField = TextField()
+    var defaultValueField = NumericField()
+    var maxValueTextField = NumericField()
+    var minValueTextField = NumericField()
+    var trailingTextField = TextField()
+
+    var widthTextField = NumericField()
+    var widthPercentageTextField = NumericField()
+    var disabledSwitch = Toggle()
+    var readOnlySwitch = Toggle()
+    var requiredSwitch = Toggle()
+    var labelTextField = TextField()
+    var showErrorSwitch = Toggle()
+    var errorTextField = TextField()
+    var helperTextField = TextField()
+    var tooltipTitleTextField = TextField()
+    var tooltipContentTextField = TextField()
+
+    lazy var helperTextPlacementPickerSelectorView = {
+        PickerSelectorView(title: "", picker: self.picker, items: InputStepper.HelperTextPlacement.allCases)
+    }()
+
+    lazy var sizePickerSelectorView = {
+        PickerSelectorView(title: "", picker: self.picker, items: InputStepper.Size.allCases)
+    }()
+
+    
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        addContentTopView(view: component)
+        setupPicker()
+        setupModel()
+    }
+    
+    override func setupForm(){
+        super.setupForm()
+        
+        addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Control Width", view: controlWidthTextField)
+        addFormRow(label: "ControlWidth Percentage", view: controlWidthPercentageTextField)
+        addFormRow(label: "Default Value", view: defaultValueField)
+        addFormRow(label: "Max Value", view: maxValueTextField)
+        addFormRow(label: "Min Value", view: minValueTextField)
+        addFormRow(label: "Trailing Text", view: trailingTextField)
+        addFormRow(label: "Size", view: sizePickerSelectorView)
+
+        addFormRow(label: "Width Value", view: widthTextField)
+        addFormRow(label: "Width Percentage", view: widthPercentageTextField)
+        addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
+        addFormRow(label: "Read Only", view: readOnlySwitch, pinTrailing: false)
+        addFormRow(label: "Required", view: requiredSwitch, pinTrailing: false)
+        addFormRow(label: "Label Text", view: labelTextField)
+        addFormRow(label: "Error", view: showErrorSwitch, pinTrailing: false)
+        addFormRow(label: "Error Text", view: errorTextField)
+        addFormRow(label: "Helper Text Placement", view: helperTextPlacementPickerSelectorView)
+        addFormRow(label: "Helper Text", view: helperTextField)
+        addFormRow(label: "Tooltip Title", view: tooltipTitleTextField)
+        addFormRow(label: "Tooltip Content", view: tooltipContentTextField)
+        
+        controlWidthTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                if let number {
+                    self?.component.controlWidth = .value(number.cgFloatValue)
+                    self?.controlWidthPercentageTextField.text = ""
+                } else {
+                    self?.component.controlWidth = nil
+                }
+            }.store(in: &subscribers)
+        
+        controlWidthPercentageTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                if let number {
+                    self?.component.controlWidth = .percentage(number.cgFloatValue)
+                    self?.controlWidthTextField.text = ""
+                } else {
+                    self?.component.controlWidth = nil
+                }
+            }.store(in: &subscribers)
+                
+        defaultValueField
+            .numberPublisher
+            .sink { [weak self] number in
+                self?.component.defaultValue = number?.intValue ?? 0
+            }.store(in: &subscribers)
+        
+        maxValueTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                guard let number else { return }
+                self?.component.maxValue = number.intValue
+            }.store(in: &subscribers)
+        
+        minValueTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                guard let number else { return }
+                self?.component.minValue = number.intValue
+            }.store(in: &subscribers)
+        
+        trailingTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.trailingText = text
+            }.store(in: &subscribers)
+        
+        
+        requiredSwitch.onChange = { [weak self] sender in
+            self?.component.isRequired = sender.isOn
+        }
+
+        showErrorSwitch.onChange = { [weak self] sender in
+            guard let self else { return }
+            self.component.showError = sender.isOn
+            if self.component.showError != sender.isOn {
+                self.showErrorSwitch.isOn = self.component.showError
+            }
+        }
+
+        disabledSwitch.onChange = { [weak self] sender in
+            self?.component.isEnabled = !sender.isOn
+        }
+        
+        readOnlySwitch.onChange = { [weak self] sender in
+            self?.component.isReadOnly = sender.isOn
+        }
+
+        labelTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.labelText = text
+            }.store(in: &subscribers)
+        
+        helperTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.helperText = text
+            }.store(in: &subscribers)
+
+        errorTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.errorText = text
+            }.store(in: &subscribers)
+
+        widthTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                self?.updateComponentConstraint(pinTrailing: number == nil)
+                if let number {
+                self?.component.widthPercentage = nil
+                self?.component.width = number.cgFloatValue
+                self?.widthPercentageTextField.text = ""
+                } else {
+                    self?.component.width = nil
+                }
+            }.store(in: &subscribers)
+       
+        widthPercentageTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                self?.updateComponentConstraint(pinTrailing: number == nil)
+                if let number, number.intValue > 10 {
+                    self?.component.width = nil
+                    self?.component.widthPercentage = number.cgFloatValue
+                    self?.widthTextField.text = ""
+                } else {
+                    self?.component.widthPercentage = nil
+                }
+            }.store(in: &subscribers)
+        
+        tooltipTitleTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.updateTooltip()
+            }.store(in: &subscribers)
+
+        tooltipContentTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.updateTooltip()
+            }.store(in: &subscribers)
+    }
+    
+    func updateTooltip() {
+        let title = tooltipTitleTextField.text ?? ""
+        let content = tooltipContentTextField.text ?? ""
+        
+        component.tooltipModel = !title.isEmpty || !content.isEmpty ? .init(title: title,
+                                                                            content: content) : nil
+    }
+    
+    //Picker
+    func setupPicker(){
+        surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.surface = item
+            self?.contentTopView.backgroundColor = item.color
+        }
+        
+        helperTextPlacementPickerSelectorView.onPickerDidSelect = { [weak self] item in
+            self?.component.helperTextPlacement = item
+        }
+        
+        sizePickerSelectorView.onPickerDidSelect = { [weak self] item in
+            self?.component.size = item
+        }
+    }
+    
+    func setupModel() {
+        component.labelText = "Quantity"
+        component.helperText = "Add up to max lines."
+        component.errorText = "You must choose a number of lines before advancing to the next step."
+        component.defaultValue = nil
+        component.trailingText = ""
+        component.onChange = { component in
+            if let text = component.value {
+                print("inputStepper Change: \(text)")
+            } else {
+                print("inputStepper Change: check code")
+            }
+        }
+
+        trailingTextField.text = component.trailingText
+        controlWidthTextField.text = ""
+        errorTextField.text = component.errorText
+        helperTextField.text = component.helperText
+        labelTextField.text = component.labelText
+        if let defaultVal = component.defaultValue {
+            defaultValueField.text = String(defaultVal)
+        }
+        minValueTextField.text = String(component.minValue)
+        maxValueTextField.text = String(component.maxValue)
+        component.size = .large
+        sizePickerSelectorView.text = "large"
+
+        //setup UI
+        surfacePickerSelectorView.text = component.surface.rawValue
+        helperTextPlacementPickerSelectorView.text = component.helperTextPlacement.rawValue
+    }
+}
+
+extension InputStepperViewController: ComponentSampleable {
+    static func makeSample() -> ComponentSample {
+        let c = Self()
+        c.setupModel()
+        return ComponentSample(component: c.component)
+    }
+}

VDSSample/ViewControllers/LabelViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 
 class LabelViewController: BaseViewController<Label> {
 
@@ -145,8 +145,9 @@ class LabelViewController: BaseViewController<Label> {
         
     override func setupForm(){
         super.setupForm()
-        addFormRow(label: "Disabled", view: disabledSwitch)
-        addFormRow(label: "Bold", view: boldSwitch)
+        addFormRow(label: "Current Language", view: Label().with { $0.text = LanguageManager.currentLanguage.description })
+        addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
+        addFormRow(label: "Bold", view: boldSwitch, pinTrailing: false)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
 
         //Scaled Fonts implementation

VDSSample/ViewControllers/ListUnorderedViewController.swift

@@ -0,0 +1,138 @@
+//
+//  ListUnorderedViewController.swift
+//  VDSSample
+//
+//  Created by Vasavi Kanamarlapudi on 16/10/24.
+//
+
+import Foundation
+import VDS
+
+class ListUnorderedViewController: BaseViewController<ListUnordered> {
+    
+    lazy var sizePickerView = {
+        PickerSelectorView(title: "Large",
+                           picker: self.picker,
+                           items: ListUnordered.Size.allCases)
+    }()
+    
+    lazy var spacingPickerView = {
+        PickerSelectorView(title:"Standard",
+                           picker: self.picker,
+                           items: ListUnordered.Spacing.allCases)
+    }()
+    
+    var leadInTextField = TextField()
+    var itemLevelTwoTextOne = TextField()
+    var itemLevelTwoTextTwo = TextField()
+    
+    var unorderedList: [ListUnordered.ListUnorderedItemModel]?
+    
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        addContentTopView(view: component)
+        setupPicker()
+        setupModel()
+    }
+    
+    override func setupForm() {
+        super.setupForm()
+        addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Size", view: sizePickerView)
+        addFormRow(label: "Spacing", view: spacingPickerView)
+        
+        let form1 = FormSection()
+        form1.title = "Lead-In Text (optional)"
+        form1.addFormRow(label: "Lead In Text", view: leadInTextField)
+        
+        let form2 = FormSection()
+        form2.title = "List Item Level 2 (Optional)"
+        form2.addFormRow(label: "Subtext 1", view: itemLevelTwoTextOne)
+        form2.addFormRow(label: "Subtext 2", view: itemLevelTwoTextTwo)
+        
+        append(section: form1)
+        append(section: form2)
+        
+        leadInTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.leadInText = text
+            }.store(in: &subscribers)
+        
+        itemLevelTwoTextOne
+            .textPublisher
+            .sink { [weak self] text in
+                guard let self else { return }
+                self.updateUnorderList()
+                self.component.unorderedList = unorderedList ?? []
+            }.store(in: &subscribers)
+        
+        itemLevelTwoTextTwo
+            .textPublisher
+            .sink { [weak self] text in
+                guard let self else { return }
+                self.updateUnorderList()
+                self.component.unorderedList = unorderedList ?? []
+            }.store(in: &subscribers)
+    }
+    
+    func setupPicker() {
+        surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in
+            self?.component.surface = item
+            self?.contentTopView.backgroundColor = item.color
+        }
+        
+        sizePickerView.onPickerDidSelect = { [weak self] item in
+            self?.component.size = item
+        }
+        
+        spacingPickerView.onPickerDidSelect = { [weak self] item in
+            self?.component.spacing = item
+        }
+    }
+    
+    func setupModel() {
+        sizePickerView.text = component.size.rawValue
+        spacingPickerView.text = component.spacing.rawValue
+        leadInTextField.text = "To manage your existing Call Intercept calling feature:"
+        self.component.leadInText = leadInTextField.text
+        itemLevelTwoTextOne.text = "Priority callers can bypass Call Intercept by entering your 4 digit Call Intercept Override Code."
+        itemLevelTwoTextTwo.text = "Your phone will alert you with a short-short-long ring and \"Priority Caller\" will appear on your display."
+        updateUnorderList()
+        self.component.unorderedList = self.unorderedList ?? []
+    }
+    
+    // Update test data
+    func updateUnorderList() {
+        if (itemLevelTwoTextOne.text?.isEmpty == true) {
+            itemLevelTwoTextOne.text = nil
+        }
+        if (itemLevelTwoTextTwo.text?.isEmpty == true) {
+            itemLevelTwoTextTwo.text = nil
+        }
+        var levelTwoSubTexts : [String?]? = nil
+        if let subtextOneEmpty = itemLevelTwoTextOne.text?.isEmpty, let subtextTwoEmpty = itemLevelTwoTextTwo.text?.isEmpty {
+            if !subtextOneEmpty && !subtextTwoEmpty {
+                levelTwoSubTexts = [itemLevelTwoTextOne.text, itemLevelTwoTextTwo.text]
+            } else if !subtextOneEmpty || !subtextTwoEmpty {
+                if subtextOneEmpty {
+                    levelTwoSubTexts = [itemLevelTwoTextTwo.text]
+                } else if subtextTwoEmpty {
+                    levelTwoSubTexts = [itemLevelTwoTextOne.text]
+                }
+            }
+            unorderedList = [
+                .init(itemLevelOneText: "Call 800-435-7986 to have your PIN reset."),
+                .init(itemLevelOneText: "To bypass Call Intercept",
+                      itemLevelTwoTexts: levelTwoSubTexts)
+            ]
+        }
+    }
+}
+
+extension ListUnorderedViewController: ComponentSampleable {
+    static func makeSample() -> ComponentSample {
+        let component = Self.makeComponent()
+        return ComponentSample(component: component)
+    }
+}

VDSSample/ViewControllers/LoaderViewController.swift

@@ -23,10 +23,10 @@ class LoaderViewController: BaseViewController<Loader>, LoaderLaunchable {
     override func setupForm() {
         super.setupForm()
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
-        addFormRow(label: "Active", view: isActive)
+        addFormRow(label: "Active", view: isActive, pinTrailing: false)
         
         let fullScreen = FormSection().with { $0.title = "LoaderLaunchable (separate from Loader)" }
-        fullScreen.addFormRow(label: "presentLoader", view: isFullscreen)
+        fullScreen.addFormRow(label: "presentLoader", view: isFullscreen, pinTrailing: false)
         append(section: fullScreen)
         
         isActive

VDSSample/ViewControllers/MenuViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 
 struct MenuComponent {
     var title: String
@@ -74,24 +74,33 @@ class MenuViewController: UITableViewController, TooltipLaunchable {
         MenuComponent(title: "Button", completed: true, viewController: ButtonViewController.self),
         MenuComponent(title: "ButtonGroup", completed: true, viewController: ButtonGroupViewController.self),
         MenuComponent(title: "ButtonIcon", completed: true, viewController: ButtonIconViewController.self),
-        MenuComponent(title: "Calendar", completed: false, viewController: CalendarViewController.self),
+        MenuComponent(title: "Calendar", completed: true, viewController: CalendarViewController.self),
+        MenuComponent(title: "Carousel", completed: true, viewController: CarouselViewController.self),
         MenuComponent(title: "Carousel Scrollbar", completed: true, viewController: CarouselScrollbarViewConttroller.self),
         MenuComponent(title: "Checkbox", completed: true, viewController: CheckboxViewController.self),
         MenuComponent(title: "CheckboxItem", completed: true, viewController: CheckboxItemViewController.self),
         MenuComponent(title: "CheckboxGroup", completed: true, viewController: CheckboxGroupViewController.self),
+        MenuComponent(title: "DatePicker", completed: true, viewController: DatePickerViewController.self),
         MenuComponent(title: "DropdownSelect", completed: true, viewController: DropdownSelectViewController.self),
+        MenuComponent(title: "FootnoteItem", completed: true, viewController: FootnoteItemViewController.self),
+        MenuComponent(title: "FootnoteGroup", completed: true, viewController: FootnoteGroupViewController.self),
         MenuComponent(title: "Icon", completed: true, viewController: IconViewController.self),
-        MenuComponent(title: "InputField", completed: false, viewController: InputFieldViewController.self),
+        MenuComponent(title: "InputField", completed: true, viewController: InputFieldViewController.self),
+        MenuComponent(title: "InputStepper", completed: true, viewController: InputStepperViewController.self),
         MenuComponent(title: "Label", completed: true, viewController: LabelViewController.self),
         MenuComponent(title: "Line", completed: true, viewController: LineViewController.self),
+        MenuComponent(title: "List Unordered", completed: false, viewController: ListUnorderedViewController.self),
         MenuComponent(title: "Loader", completed: true, viewController: LoaderViewController.self),
+        MenuComponent(title: "Modal", completed: true, viewController: ModalViewController.self),
         MenuComponent(title: "Notification", completed: true, viewController: NotificationViewController.self),
         MenuComponent(title: "Pagination", completed: true, viewController: PaginationViewController.self),
+        MenuComponent(title: "PriceLockup", completed: true, viewController: PriceLockupViewController.self),
         MenuComponent(title: "RadioBoxGroup", completed: true, viewController: RadioBoxGroupViewController.self),
         MenuComponent(title: "RadioButton", completed: true, viewController: RadioButtonViewController.self),
         MenuComponent(title: "RadioButtonItem", completed: true, viewController: RadioButtonItemViewController.self),
         MenuComponent(title: "RadioButtonGroup", completed: true, viewController: RadioButtonGroupViewController.self),
 //        //MenuComponent(title: "TabsContainer", completed: false, viewController: TabsContainerViewController.self),
+        MenuComponent(title: "Table", completed: true, viewController: TableViewController.self),
         MenuComponent(title: "Tabs", completed: true, viewController: TabsViewController.self),
         MenuComponent(title: "TextArea", completed: true, viewController: TextAreaViewController.self),
         MenuComponent(title: "TextLink", completed: true, viewController: TextLinkViewController.self),
@@ -109,11 +118,31 @@ class MenuViewController: UITableViewController, TooltipLaunchable {
     }
     
     override func viewDidLoad() {
-        title = "VDS Sample: Build \(Bundle.main.build ?? "none")"
-        let tooltip =  VDS.Tooltip()
-        tooltip.title = "Release Notes: \(VDSHelper.version)"
-        tooltip.content = VDSHelper.releaseNotes()
-        navigationItem.rightBarButtonItem = UIBarButtonItem(customView: tooltip)
+        let build = Bundle.main.build ?? "none"
+        title = "VDS Sample: Build \(build)"
+       
+        let content = VDSHelper.releaseNotes()
+        if !content.isEmpty {
+            let tooltip =  VDS.Tooltip()
+            tooltip.title = "Release Notes: \(build)"
+            tooltip.content = content
+            navigationItem.rightBarButtonItem = UIBarButtonItem(customView: tooltip)
+        }
+        
+        var useSpanish = Toggle().with {
+            $0.offText = "English"
+            $0.onText = "Spanish"
+            $0.showText = true
+            $0.textPosition = .right
+        }
+
+        useSpanish.isOn = LanguageManager.currentLanguage == .spanish
+        useSpanish.onChange = { control in
+            LanguageManager.currentLanguage = control.isOn ? .spanish : .english
+        }
+        navigationItem.leftBarButtonItem = UIBarButtonItem(customView: useSpanish)
+
+        
         super.viewDidLoad()
         overrideUserInterfaceStyle = .light
         tableView.register(MenuCell.self, forCellReuseIdentifier: "cell")

VDSSample/ViewControllers/ModalViewController.swift

@@ -0,0 +1,127 @@
+//
+//  ModalViewController.swift
+//  VDSSample
+//
+//  Created by Kanamarlapudi, Vasavi on 05/09/24.
+//
+
+import Foundation
+import UIKit
+import VDS
+import VDSCoreTokens
+import Combine
+
+class  ModalViewController: BaseViewController<Modal> {
+
+    var showFooterSwitch = Toggle()
+    var fullScreenDialogSwitch = Toggle()
+    var singleButtonSwitch = Toggle()
+    var hideCloseSwitch = Toggle()
+    var titleTextField = TextField()
+    var bodyTextField = TextField()
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        addContentTopView(view: .makeWrapper(for: component, edgeSpacing: 16.0), edgeSpacing: 0.0)
+        
+        setupPicker()
+        setupModel()
+    }
+    
+    override func setupForm(){
+        super.setupForm()
+        addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Show Modal Footer", view: showFooterSwitch, pinTrailing: false)
+        addFormRow(label: "Full Screen Dialog", view: fullScreenDialogSwitch, pinTrailing: false)
+        addFormRow(label: "Single Button", view: singleButtonSwitch, pinTrailing: false)
+        addFormRow(label: "Hide Close Button", view: hideCloseSwitch, pinTrailing: false)
+        addFormRow(label: "Modal Title", view: titleTextField)
+        addFormRow(label: "Modal Body", view: bodyTextField)
+        
+        fullScreenDialogSwitch.publisher(for: .valueChanged).sink { [weak self] control in
+            self?.component.fullScreenDialog = control.isOn
+        }.store(in: &subscribers)
+
+        showFooterSwitch.publisher(for: .valueChanged).sink { [weak self] control in
+            guard let self else { return }
+            if control.isOn {
+                showFooter(with: singleButtonSwitch.isOn)
+            } else {
+                self.component.buttonData = nil
+            }
+        }.store(in: &subscribers)
+
+        singleButtonSwitch.publisher(for: .valueChanged).sink { [weak self] control in
+            guard let self else { return }
+            if control.isOn {
+                showFooterSwitch.isOn = true
+            }
+            showFooter(with: control.isOn)
+        }.store(in: &subscribers)
+
+        hideCloseSwitch.publisher(for: .valueChanged).sink { [weak self] control in
+            self?.component.hideCloseButton = control.isOn
+        }.store(in: &subscribers)
+        
+        titleTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.title = text
+            }.store(in: &subscribers)
+        
+        bodyTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.content = text
+            }.store(in: &subscribers)
+        
+    }
+    
+    func showFooter(with singleButton: Bool) {
+        if singleButton {
+            component.buttonData = [
+                Button().with{ $0.use = .secondary; $0.text = "Close"; $0.onClick =  { button in self.dismiss(animated: true); print("\(button.text!) clicked")} ; $0.size = .large }
+            ]
+        } else {
+            component.buttonData = [
+                Button().with{ $0.use = .primary; $0.text = "In-store Pickup"; $0.onClick =  { button in print("\(button.text!) clicked")}; $0.size = .large },
+                Button().with{ $0.use = .secondary; $0.text = "Close"; $0.onClick =  { button in self.dismiss(animated: true); print("\(button.text!) clicked")} ; $0.size = .large }
+            ]
+        }
+    }
+    
+    func setupModel() {
+        component.title = "Choose free 2-day shipping or In-store Pickup"
+        component.content = "Order online, pickup in store, or get free 2-day shipping. Free 2-day shipping available for device and accessory orders of $49 or more. Free 2-day shipping when you order online M-F by 8PM EST. In-Store Pickup is available across the U.S. at participating Verizon Wireless stores. Please bring photo ID and credit/debit card only if used as payment. Order will be held for 3 days from the time if was placed. \n \n Order online, pickup in store, or get free 2-day shipping. Free 2-day shipping available for device and accessory orders of $49 or more. Free 2-day shipping when you order online M-F by 8PM EST. In-Store Pickup is available across the U.S. at participating Verizon Wireless stores. Please bring photo ID and credit/debit card only if used as payment. Order will be held for 3 days from the time if was placed. \n \n Order online, pickup in store, or get free 2-day shipping. Free 2-day shipping available for device and accessory orders of $49 or more. Free 2-day shipping when you order online M-F by 8PM EST. In-Store Pickup is available across the U.S. at participating Verizon Wireless stores. Please bring photo ID and credit/debit card only if used as payment. Order will be held for 3 days from the time if was placed. \n \n Order online, pickup in store, or get free 2-day shipping. Free 2-day shipping available for device and accessory orders of $49 or more. Free 2-day shipping when you order online M-F by 8PM EST. In-Store Pickup is available across the U.S. at participating Verizon Wireless stores. Please bring photo ID and credit/debit card only if used as payment. Order will be held for 3 days from the time if was placed. \n \n Order online, pickup in store, or get free 2-day shipping. Free 2-day shipping available for device and accessory orders of $49 or more. Free 2-day shipping when you order online M-F by 8PM EST. In-Store Pickup is available across the U.S. at participating Verizon Wireless stores. Please bring photo ID and credit/debit card only if used as payment. Order will be held for 3 days from the time if was placed. \n \n Order online, pickup in store, or get free 2-day shipping. Free 2-day shipping available for device and accessory orders of $49 or more. Free 2-day shipping when you order online M-F by 8PM EST. In-Store Pickup is available across the U.S. at participating Verizon Wireless stores. Please bring photo ID and credit/debit card only if used as payment. Order will be held for 3 days from the time if was placed."
+        component.contentView = Icon().with { $0.name = .addFolder; $0.size = .medium }
+        let onClick: (ButtonBase) -> Void = { button in print("\(button.text!) clicked")}
+        component.buttonData = [
+            Button().with{ $0.use = .primary; $0.text = "In-store Pickup"; $0.onClick =  onClick; $0.size = .large },
+            Button().with{ $0.use = .secondary; $0.text = "Close"; $0.onClick =  { button in self.dismiss(animated: true); print("\(button.text!) clicked")} ; $0.size = .large }
+        ]
+        
+        //setup UI
+        surfacePickerSelectorView.text = component.surface.rawValue
+        titleTextField.text = component.title
+        bodyTextField.text = component.content
+        showFooterSwitch.isOn = true
+    }
+            
+    //Picker
+    func setupPicker(){
+        surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.surface = item
+            self?.contentTopView.backgroundColor = item.color
+        }
+    }
+}
+
+extension ModalViewController: ComponentSampleable {
+    static func makeSample() -> ComponentSample {
+        let component = Self.makeComponent()
+        component.title = "Choose free 2-day shipping or In-store Pickup"
+        component.content = "Order online, pickup in store, or get free 2-day shipping. Free 2-day shipping available for device and accessory orders of $49 or more. Free 2-day shipping when you order online M-F by 8PM EST. In-Store Pickup is available across the U.S. at participating Verizon Wireless stores. Please bring photo ID and credit/debit card only if used as payment. Order will be held for 3 days from the time if was placed."
+        return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual, bottomPinningType: .lessThanOrEqual)
+    }
+}
+

VDSSample/ViewControllers/NotificationViewController.swift

@@ -52,8 +52,8 @@ class NotificationViewController: BaseViewController<VDS.Notification> {
         addFormRow(label: "Style", view: notificationTypePickerSelectorView)
         addFormRow(label: "Title", view: titleTextField)
         addFormRow(label: "SubTitle", view: subTitleTextField)
-        addFormRow(label: "Hide Button Group", view: buttonGroupToggle)
-        addFormRow(label: "Hide Close Button", view: hideCloseButtonToggle)
+        addFormRow(label: "Hide Button Group", view: buttonGroupToggle, pinTrailing: false)
+        addFormRow(label: "Hide Close Button", view: hideCloseButtonToggle, pinTrailing: false)
         addFormRow(label: "Action", view: label)
         addFormRow(label: "First Button Text", view: firstButtonTextField)
         addFormRow(label: "Second Button Text", view: secondButtonTextField)

VDSSample/ViewControllers/PriceLockupViewController.swift

@@ -0,0 +1,152 @@
+//
+//  PriceLockupViewController.swift
+//  VDSSample
+//
+//  Created by Kanamarlapudi, Vasavi on 06/08/24.
+//
+
+import Foundation
+import UIKit
+import VDS
+
+class PriceLockupViewController: BaseViewController<PriceLockup> {
+    
+    lazy var kindPickerSelectorView = {
+        PickerSelectorView(title: "primary",
+                           picker: self.picker,
+                           items: PriceLockup.Kind.allCases)
+    }()
+    
+    lazy var termPickerSelectorView = {
+        PickerSelectorView(title: "month",
+                           picker: self.picker,
+                           items: PriceLockup.Term.allCases)
+    }()
+
+    lazy var sizePickerSelectorView = {
+        PickerSelectorView(title: "medium",
+                           picker: self.picker,
+                           items: PriceLockup.Size.allCases)
+    }()
+
+    var boldSwitch = Toggle()
+    var hideCurrencySwitch = Toggle()
+    var strikethroughSwitch = Toggle()
+    var uniformSizeSwitch = Toggle()
+    
+    var priceTextField = NumericField()
+    var leadingTextField = TextField()
+    var termTextField = TextField()
+    var trailingTextField = TextField()
+    var superscriptTextField = TextField()
+
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        addContentTopView(view: component)
+        setupPicker()
+        setupModel()
+    }
+    
+    override func setupForm() {
+        super.setupForm()
+        addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Bold", view: boldSwitch, pinTrailing: false)
+        addFormRow(label: "Kind", view: kindPickerSelectorView)
+        addFormRow(label: "Size", view: sizePickerSelectorView)
+        addFormRow(label: "Hide Currency", view: hideCurrencySwitch, pinTrailing: false)
+        addFormRow(label: "Price", view: priceTextField)
+        addFormRow(label: "Leading Text", view: leadingTextField)
+        addFormRow(label: "Strikethrough", view: strikethroughSwitch, pinTrailing: false)
+        addFormRow(label: "Uniform Size", view: uniformSizeSwitch, pinTrailing: false)
+        addFormRow(label: "Term", view: termPickerSelectorView)
+        addFormRow(label: "Trailing Text", view: trailingTextField)
+        addFormRow(label: "Superscript", view: superscriptTextField)
+        
+        boldSwitch.publisher(for: .valueChanged).sink { [weak self] control in
+            self?.component.bold = control.isOn
+        }.store(in: &subscribers)
+        
+        hideCurrencySwitch.publisher(for: .valueChanged).sink { [weak self] control in
+            self?.component.hideCurrency = control.isOn
+        }.store(in: &subscribers)
+        
+        strikethroughSwitch.publisher(for: .valueChanged).sink { [weak self] control in
+            self?.component.strikethrough = control.isOn
+        }.store(in: &subscribers)
+        
+        uniformSizeSwitch.publisher(for: .valueChanged).sink { [weak self] control in
+            self?.component.uniformSize = control.isOn
+        }.store(in: &subscribers)
+        
+        priceTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                if let number {
+                    self?.component.price = number.floatValue
+                } else {
+                    self?.component.price = nil
+                }
+            }.store(in: &subscribers)
+        
+        leadingTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.leadingText = text
+            }.store(in: &subscribers)
+
+        trailingTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.trailingText = text
+            }.store(in: &subscribers)
+
+        superscriptTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.superscript = text
+            }.store(in: &subscribers)
+    }
+    
+    func setupModel() {
+        component.price = 24.22
+        component.superscript = "*"
+        component.leadingText = "Save"
+        component.trailingText = "with Auto Pay"
+        
+        sizePickerSelectorView.text = component.size.rawValue
+        kindPickerSelectorView.text = component.kind.rawValue
+        termPickerSelectorView.text = component.term.rawValue
+        priceTextField.text = "\(component.price!)"
+        leadingTextField.text = component.leadingText
+        trailingTextField.text = component.trailingText
+        superscriptTextField.text = component.superscript
+    }
+    
+    func setupPicker() {
+        surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.surface = item
+            self?.contentTopView.backgroundColor = item.color
+        }
+       
+        kindPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.kind = item
+        }
+        
+        sizePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.size = item
+        }
+        
+        termPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.term = item
+        }
+    }
+}
+
+extension PriceLockupViewController: ComponentSampleable {
+    static func makeSample() -> ComponentSample {
+        let c = Self()
+        c.setupModel()
+        return ComponentSample(component: c.component)
+    }
+}

VDSSample/ViewControllers/RadioBoxGroupViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 import Combine
 
 class  RadioBoxGroupViewController: BaseViewController<RadioBoxGroup>{
@@ -31,9 +31,9 @@ class  RadioBoxGroupViewController: BaseViewController<RadioBoxGroup>{
     override func setupForm(){
         super.setupForm()
         addActionRow()
-        addFormRow(label: "Disabled", view: disabledSwitch)
+        addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
-        addFormRow(label: "Strikethrough", view: strikeThroughSwitch)
+        addFormRow(label: "Strikethrough", view: strikeThroughSwitch, pinTrailing: false)
         addFormRow(label: "Text", view: textField)
         addFormRow(label: "Sub Text", view: subTextField)
         addFormRow(label: "Sub Text Right", view: subTextRightField)
@@ -78,8 +78,19 @@ class  RadioBoxGroupViewController: BaseViewController<RadioBoxGroup>{
         radioBox2.inputId = "model2"
         radioBox2.value = "model 2 Value"
         radioBox2.text = "iPhone 11 Bundle 2"
-        radioBox2.subText = "Apple iPhone 11 - 128 GB\nOtterbox Case Black\nScreen Protector"
 
+        let fullText = "I accept the Terms and Conditions"
+        let linkText = "Terms and Conditions"
+        radioBox2.subText = fullText
+        
+        if let link = ActionLabelAttribute(text: fullText, linkText: linkText) {
+            link.action.sink { [weak self] in
+                guard let self else { return }
+                present(UIAlertController(title: "TextLink", message: "Clicked \(linkText)", preferredStyle: .alert).with{ $0.addAction(.init(title: "OK", style: .default)) }, animated: true)
+            }.store(in: &subscribers)
+            radioBox2.subTextAttributes = [link]
+        }
+        
         component.selectorModels = [radioBox1, radioBox2]
 
         component.onChange = { [weak self] group in
@@ -120,7 +131,7 @@ extension RadioBoxGroupViewController: ComponentSampleable {
         radioBox1.text = "iPhone 11 Bundle 1"
         radioBox1.subText = "Apple iPhone 11 - 64 GB\nOtterbox Case Red\nScreen Protector"
         radioBox1.subTextRight = "Right Text"
-
+        
         var radioBox2 = RadioBoxGroup.RadioBoxItemModel()
         radioBox2.inputId = "model2"
         radioBox2.value = "model 2 Value"
@@ -129,6 +140,6 @@ extension RadioBoxGroupViewController: ComponentSampleable {
 
         component.selectorModels = [radioBox1, radioBox2]
 
-        return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
+        return ComponentSample(component: component)
     }
 }

VDSSample/ViewControllers/RadioButtonGroupViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 import Combine
 
 class  RadioButtonGroupViewController: BaseViewController<RadioButtonGroup> {
@@ -29,11 +29,11 @@ class  RadioButtonGroupViewController: BaseViewController<RadioButtonGroup> {
     override func setupForm(){
         super.setupForm()
         addActionRow()
-        addFormRow(label: "Disabled", view: disabledSwitch)
+        addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Label Text", view: labelTextField)
         addFormRow(label: "Child Text", view: childTextField)
-        addFormRow(label: "Error", view: showErrorSwitch)
+        addFormRow(label: "Error", view: showErrorSwitch, pinTrailing: false)
         
         showErrorSwitch.onChange = { [weak self] sender in
             self?.component.showError = sender.isOn
@@ -133,6 +133,6 @@ extension RadioButtonGroupViewController: ComponentSampleable {
         
         component.selectorModels = [radioButton1, radioButton2, radioButton3]
         
-        return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
+        return ComponentSample(component: component)
     }
 }

VDSSample/ViewControllers/RadioButtonItemViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 import Combine
 
 class  RadioButtonItemViewController: BaseViewController<RadioButtonItem> {
@@ -30,11 +30,11 @@ class  RadioButtonItemViewController: BaseViewController<RadioButtonItem> {
     override func setupForm(){
         super.setupForm()
         addActionRow()
-        addFormRow(label: "Disabled", view: disabledSwitch)
+        addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Label Text", view: labelTextField)
         addFormRow(label: "Child Text", view: childTextField)
-        addFormRow(label: "Error", view: showErrorSwitch)
+        addFormRow(label: "Error", view: showErrorSwitch, pinTrailing: false)
         addFormRow(label: "Error Text", view: errorTextField)
         
         showErrorSwitch.onChange = { [weak self] sender in
@@ -105,6 +105,6 @@ extension RadioButtonItemViewController: ComponentSampleable {
         component.childText = "I agree to Verizon's terms and conditions click here"
         component.errorText = "Error Text"
 
-        return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
+        return ComponentSample(component: component)
     }
 }

VDSSample/ViewControllers/RadioButtonViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 import Combine
 
 class  RadioButtonViewController: BaseViewController<RadioButton> {
@@ -18,16 +18,16 @@ class  RadioButtonViewController: BaseViewController<RadioButton> {
     let toggle = UISwitch()
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: .makeWrapper(for: component, edgeSpacing: 16.0), edgeSpacing: 0.0)
+        addContentTopView(view: component, pinTrailing: false)
         setupPicker()
         setupModel()
     }
     override func setupForm(){
         super.setupForm()
         addActionRow()
-        addFormRow(label: "Disabled", view: disabledSwitch)
+        addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
-        addFormRow(label: "Error", view: showErrorSwitch)
+        addFormRow(label: "Error", view: showErrorSwitch, pinTrailing: false)
         
         showErrorSwitch.onChange = { [weak self] sender in
             guard let self else { return }

VDSSample/ViewControllers/TableViewController.swift

@@ -0,0 +1,232 @@
+//
+//  TableViewController.swift
+//  VDSSample
+//
+//  Created by Nadigadda, Sumanth on 24/04/24.
+//
+
+import Foundation
+import VDS
+import UIKit
+import VDSCoreTokens
+
+enum TableLineStyle: String, CaseIterable {
+    case none
+    case primary
+    case secondary
+    
+    func lineStyle() -> Line.Style? {
+        switch self {
+        case .primary:
+            return Line.Style.primary
+        case .secondary:
+            return Line.Style.secondary
+        case .none:
+            return nil
+        }
+    }
+}
+
+class TableViewController: BaseViewController<Table> {
+
+    var striped = Toggle()
+    
+    var fillContainer = Toggle()
+    
+    var customColumnWidthSize = NumericField().with {
+        $0.placeholder = "Minimum 50px"
+    }
+    
+    lazy var headerLineStylePicker = {
+        PickerSelectorView(title: "primary", picker: self.picker, items: TableLineStyle.allCases)
+    }()
+    
+    lazy var rowLineStylePicker = {
+        PickerSelectorView(title: "secondary", picker: self.picker, items: TableLineStyle.allCases)
+    }()
+    
+    lazy var paddingPicker = {
+        PickerSelectorView(title: "standard", picker: self.picker, items: Table.Padding.allCases)
+    }()
+    
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        self.setupPicker()
+        self.setupModel()
+    }
+    
+    override func setupForm() {
+        super.setupForm()
+        addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Padding", view: paddingPicker)
+        addFormRow(label: "Striped", view: striped, pinTrailing: false)
+        addFormRow(label: "Header line style", view: headerLineStylePicker)
+        addFormRow(label: "Row line style", view: rowLineStylePicker)
+        addFormRow(label: "Fill container", view: fillContainer, pinTrailing: false)
+        addFormRow(label: "Custom column size", view: customColumnWidthSize)
+        
+        fillContainer.isOn = component.fillContainer
+        updateTextFieldStatus(enable: !fillContainer.isOn)
+        
+        addContentTopView(view: component)
+        
+        striped.onChange = { [weak self] sender in
+            self?.component.striped = sender.isOn
+            
+            let headerStyle = sender.isOn ? nil : TableLineStyle(rawValue: self?.headerLineStylePicker.text ?? "")
+            let rowStyle = sender.isOn ? nil : TableLineStyle(rawValue: self?.rowLineStylePicker.text ?? "")
+            
+            var headers = self?.component.tableHeader ?? [TableRowModel]()
+            self?.updateBottomLineStyle(items:&headers, style: headerStyle?.lineStyle())
+            self?.component.tableHeader = headers
+            
+            var rows = self?.component.tableRows ?? [TableRowModel]()
+            self?.updateBottomLineStyle(items:&rows, style: rowStyle?.lineStyle())
+            self?.component.tableRows = rows
+            
+            self?.component.padding = .compact
+            self?.paddingPicker.text = Table.Padding.compact.rawValue
+        }
+        
+        fillContainer.onChange = { [weak self] sender in
+            self?.component.fillContainer = sender.isOn
+            self?.updateTextFieldStatus(enable:!sender.isOn)
+            if let count = self?.component.tableHeader.first?.columnsCount,
+               let text = self?.customColumnWidthSize.text,
+               let width = NumberFormatter().number(from: text) {
+                self?.component.columnWidths = Array(repeating: CGFloat(truncating: width), count: count)
+            }
+        }
+                
+        customColumnWidthSize.numberPublisher.sink { [weak self]  text in
+            if let count = self?.component.tableHeader.first?.columnsCount, let text, text.intValue > 50 {
+                self?.component.columnWidths = Array(repeating: CGFloat(truncating: text), count: count)
+            }
+        }.store(in: &subscribers)
+    }
+    
+    func setupPicker() {
+        surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in
+            self?.component.surface = item
+            self?.contentTopView.backgroundColor = item.color
+        }
+        
+        headerLineStylePicker.onPickerDidSelect = { [weak self] item in
+            var headers = self?.component.tableHeader ?? [TableRowModel]()
+            self?.updateBottomLineStyle(items:&headers, style: item.lineStyle())
+            self?.component.tableHeader = headers
+        }
+        
+        rowLineStylePicker.onPickerDidSelect = { [weak self] item in
+            
+            var rows = self?.component.tableRows ?? [TableRowModel]()
+            self?.updateBottomLineStyle(items:&rows, style: item.lineStyle())
+            self?.component.tableRows = rows
+        }
+        
+        paddingPicker.onPickerDidSelect = { [weak self] item in
+            self?.component.padding = item
+        }
+    }
+    
+    func updateTextFieldStatus(enable: Bool) {
+        customColumnWidthSize.isEnabled = enable
+        customColumnWidthSize.backgroundColor = enable ? UIColor.white : VDSColor.paletteGray85
+    }
+    
+    func updateBottomLineStyle(items:inout [TableRowModel], style: Line.Style?) {
+        for currentRowIndex in 0..<items.count {
+            var currentRow = items[currentRowIndex]
+            for currentRowItem in 0..<currentRow.columnsCount {
+                currentRow.columns[currentRowItem].bottomLine = style
+            }
+            items[currentRowIndex] = currentRow
+        }
+    }
+    
+    func setupModel() {
+        ///Header row
+        
+        let tableInfoLabel = Label().with({
+            $0.text = ""
+            $0.accessibilityLabel = "Verizon Plan compare, table, with 3 Rows, 3 Columns, Empty"
+        })
+        self.component.tableHeader = [TableRowModel(columns: [TableItemModel(bottomLine: .primary, component: tableInfoLabel),
+                                                              TableItemModel(bottomLine: .primary, component: Label().with { $0.text = "Verizon smart family"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping}),
+                                                              TableItemModel(bottomLine: .primary, component: Label().with { $0.text = "Call filter"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping })], isHeader: true)]
+        
+        ///First row
+        var rows = [TableRowModel(columns: [TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "Cost"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}),
+                     TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "$5/month for up to 10 lines"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}),
+                    TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "$2.99/month per device"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})])]
+        ///second row
+        rows.append(TableRowModel(columns: [TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "Block web domains"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}),
+                     TableItemModel(bottomLine: .secondary, component: Icon().with { $0.name = Icon.Name.checkmark }),
+                     TableItemModel(bottomLine: .secondary, component: Icon().with { $0.name = Icon.Name.checkmark })]))
+        
+        ///Third row
+        rows.append(TableRowModel(columns: [TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "Block calls and messages from specific numbers"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}),
+                     TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "Permanently"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}),
+                    TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "Permanently"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})]))
+        
+        if UIDevice.isIPad {
+            
+            ///Fourth row
+            let titleLockUp = TitleLockup()
+            let eyebrowModel = TitleLockup.EyebrowModel(text: "Today only.")
+            let titleModel = TitleLockup.TitleModel(text: "Get more of our best")
+            let subTitleModel = TitleLockup.SubTitleModel(text: "Get both of our best and pay less. Pair 5G Home Internet with Verizon mobile to save every month.")
+            
+            titleLockUp.eyebrowModel = eyebrowModel
+            titleLockUp.titleModel = titleModel
+            titleLockUp.subTitleModel = subTitleModel
+            
+            let button = Button()
+            button.text = "Testing"
+            
+            rows.append(TableRowModel(columns: [TableItemModel(bottomLine: .secondary, component:Toggle()),
+                         TableItemModel(bottomLine: .secondary, component:titleLockUp),
+                        TableItemModel(bottomLine: .secondary, component: button)]))
+            
+            
+            ///Fifth row
+            let tilelet = Tilelet()
+            let ftitleModel = Tilelet.TitleModel(text: "Save $XX on your monthly bill.")
+            let fsubTitleModel = Tilelet.SubTitleModel(text: "Enroll in Auto Pay & paper-free billing to save on your monthly bill.")
+            tilelet.titleModel = ftitleModel
+            tilelet.subTitleModel = fsubTitleModel
+            
+            let textArea = TextArea()
+            textArea.labelText = "Street Address"
+            textArea.helperText = "For example: 123 Verizon St"
+            textArea.errorText = "Enter a valid address."
+            textArea.tooltipModel = .init(title: "Check the formatting of your address", content:"House/Building number then street name")
+            
+            let trailingToolTip = TrailingTooltipLabel()
+            trailingToolTip.labelText = "5G Ultra Wideband is available in your area"
+            trailingToolTip.tooltipModel = .init(title: "Check the formatting of your address",
+                                           content:"House/Building number then street name")
+            
+            let iconView = Icon()
+            iconView.name = .cleanSurface
+            
+            rows.append(TableRowModel(columns: [TableItemModel(bottomLine: .secondary, component:textArea),
+                         TableItemModel(bottomLine: .secondary, component:iconView),
+                         TableItemModel(bottomLine: .secondary, component:trailingToolTip)]))
+        }
+        
+        
+        component.fillContainer = true
+        component.columnWidths = [400.0, 400.0, 400.0]
+        
+        self.component.tableRows = rows
+    }
+}
+
+extension TableViewController: ComponentSampleable {
+    static func makeSample() -> ComponentSample {
+        let c = Self()
+        c.setupModel()
+        return ComponentSample(component: c.component)
+    }
+}

VDSSample/ViewControllers/TableViewTestController.swift

@@ -7,7 +7,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 
 public typealias ComponentSampleView = UIView & Surfaceable
 
@@ -20,7 +20,7 @@ public struct ComponentSample {
     public enum LessThanPinningType: String {
         case none, equalTo, lessThanOrEqual
     }
-    
+    public var edgeInset: UIEdgeInsets = .uniform(16)
     public var top: GreaterThanPinningType = .equalTo
     public var leading: GreaterThanPinningType = .equalTo
     public var trailing: LessThanPinningType = .equalTo
@@ -30,16 +30,18 @@ public struct ComponentSample {
                 topPinningType: GreaterThanPinningType = .equalTo,
                 leadingPinningType: GreaterThanPinningType = .equalTo,
                 trailingPinningType: LessThanPinningType = .equalTo,
-                bottomPinningType: LessThanPinningType = .equalTo) {
+                bottomPinningType: LessThanPinningType = .equalTo,
+                edgeInset: UIEdgeInsets = .uniform(16)) {
         
         self.component = component
         self.top = topPinningType
         self.leading = leadingPinningType
         self.trailing = trailingPinningType
         self.bottom = bottomPinningType
+        self.edgeInset = edgeInset
     }
     
-    public func pin(edgeInset: UIEdgeInsets = .zero) {
+    public func pin() {
         
         guard let superview = component.superview else { return }
         switch top {
@@ -126,10 +128,10 @@ public class TableViewTestController: UIViewController, Initable, Surfaceable {
             }
         }
 
-        let toggleSample = ComponentSample(component: toggle, leadingPinningType: .none)
+        let toggleSample = ComponentSample(component: toggle, leadingPinningType: .none, edgeInset: .init(top: 5, left: 0, bottom: 5, right: 16))
         let wrapper = UIView().with { $0.translatesAutoresizingMaskIntoConstraints = false }
         wrapper.addSubview(toggle)
-        toggleSample.pin(edgeInset: .init(top: 5, left: 0, bottom: 5, right: 16))
+        toggleSample.pin()
         
         let stackView = UIStackView(arrangedSubviews: [wrapper, tableView]).with {
             $0.translatesAutoresizingMaskIntoConstraints = false
@@ -193,7 +195,7 @@ extension TableViewTestController : UITableViewDelegate, UITableViewDataSource {
         
         let cell = UITableViewCell()
         cell.contentView.addSubview(component)
-        sample.pin(edgeInset: .uniform(16))
+        sample.pin()
         cell.backgroundColor = surface.color
         cell.layoutIfNeeded()
         return cell

VDSSample/ViewControllers/TabsContainerViewController.swift

@@ -9,7 +9,7 @@ import Foundation
 import UIKit
 import VDS
 import Combine
-import VDSTokens
+import VDSCoreTokens
 
 
 
@@ -59,8 +59,8 @@ class TabsContainerViewController: BaseViewController<TabsContainer> {
     
     override func setupForm(){
         super.setupForm()
-        addFormRow(label: "Large Sample", view: sampleSwitch)
-        addFormRow(label: "Show Borderline", view: borderlineSwitch)
+        addFormRow(label: "Large Sample", view: sampleSwitch, pinTrailing: false)
+        addFormRow(label: "Show Borderline", view: borderlineSwitch, pinTrailing: false)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Size", view: sizePickerSelectorView)
         
@@ -72,7 +72,7 @@ class TabsContainerViewController: BaseViewController<TabsContainer> {
         }
         
         //only in horizontal mode
-        horizontalOrientationFormStackView.addFormRow(label: "Fill Container", view: fillContainerSwitch)
+        horizontalOrientationFormStackView.addFormRow(label: "Fill Container", view: fillContainerSwitch, pinTrailing: false)
         horizontalOrientationFormStackView.addFormRow(label: "Indicator Position", view: indicatorPositionPickerSelectorView)
         overflowRow = horizontalOrientationFormStackView.addFormRow(label: "Overflow", view: overflowPickerSelectorView)
         

VDSSample/ViewControllers/TabsViewController.swift

@@ -9,7 +9,7 @@ import Foundation
 import UIKit
 import VDS
 import Combine
-import VDSTokens
+import VDSCoreTokens
 
 class TabsViewController: BaseViewController<Tabs> {
     
@@ -59,8 +59,8 @@ class TabsViewController: BaseViewController<Tabs> {
     
     override func setupForm(){
         super.setupForm()
-        addFormRow(label: "Large Sample", view: sampleSwitch)
-        addFormRow(label: "Show Borderline", view: borderlineSwitch)
+        addFormRow(label: "Large Sample", view: sampleSwitch, pinTrailing: false)
+        addFormRow(label: "Show Borderline", view: borderlineSwitch, pinTrailing: false)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Size", view: sizePickerSelectorView)
         
@@ -69,7 +69,7 @@ class TabsViewController: BaseViewController<Tabs> {
         }
 
         //only in horizontal mode
-        horizontalOrientationFormStackView.addFormRow(label: "Fill Container", view: fillContainerSwitch)
+        horizontalOrientationFormStackView.addFormRow(label: "Fill Container", view: fillContainerSwitch, pinTrailing: false)
         horizontalOrientationFormStackView.addFormRow(label: "Indicator Position", view: indicatorPositionPickerSelectorView)
         //overflowRow = horizontalOrientationFormStackView.addFormRow(label: "Overflow", view: overflowPickerSelectorView)
 

VDSSample/ViewControllers/TextAreaViewController.swift

@@ -8,13 +8,14 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 import Combine
 
 class  TextAreaViewController: BaseViewController<TextArea> {
 
     var disabledSwitch = Toggle()
     var requiredSwitch = Toggle()
+    var transparentBgSwitch = Toggle()
     var labelTextField = TextField()
     var errorTextField = TextField()
     var helperTextField = TextField()
@@ -34,21 +35,22 @@ class  TextAreaViewController: BaseViewController<TextArea> {
     override func viewDidLoad() {
         super.viewDidLoad()
         addContentTopView(view: component)
-        component.text = "Starting Text"
         setupPicker()
         setupModel()
     }
         
     override func setupForm(){
         super.setupForm()
-        addFormRow(label: "Disabled", view: disabledSwitch)
-        addFormRow(label: "Required", view: requiredSwitch)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
+        addFormRow(label: "Read Only", view: readOnlySwitch, pinTrailing: false)
+        addFormRow(label: "Required", view: requiredSwitch, pinTrailing: false)
+        addFormRow(label: "Transparent Background", view: transparentBgSwitch, pinTrailing: false)
         addFormRow(label: "Label Text", view: labelTextField)
         addFormRow(label: "Helper Text", view: helperTextField)
-        addFormRow(label: "Read Only", view: readOnlySwitch)
-        addFormRow(label: "Error", view: showErrorSwitch)
+        addFormRow(label: "Error", view: showErrorSwitch, pinTrailing: false)
         addFormRow(label: "Error Text", view: errorTextField)
+        addFormRow(label: "Width", view: widthTextField)
         addFormRow(label: "ToolTip Title", view: tooltipTitleTextField)
         addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
         addFormRow(label: "Character Count", view: maxLengthTextField)
@@ -74,6 +76,10 @@ class  TextAreaViewController: BaseViewController<TextArea> {
             self?.component.isReadOnly = sender.isOn
         }
         
+        transparentBgSwitch.onChange = { [weak self] sender in
+            self?.component.transparentBackground = sender.isOn
+        }
+        
         labelTextField
             .textPublisher
             .sink { [weak self] text in
@@ -95,11 +101,8 @@ class  TextAreaViewController: BaseViewController<TextArea> {
         widthTextField
             .numberPublisher
             .sink { [weak self] number in
-                guard let number else {
-                    self?.component.width = nil
-                    return
-                }
-                self?.component.width = number.cgFloatValue
+                self?.updateComponentConstraint(pinTrailing: number == nil)
+                self?.component.width = number?.cgFloatValue
             }.store(in: &subscribers)
         
         tooltipTitleTextField
@@ -126,7 +129,6 @@ class  TextAreaViewController: BaseViewController<TextArea> {
     }
     
     func setupModel() {
-        component.width = 328
         component.labelText = "Street Address"
         component.helperText = "For example: 123 Verizon St"
         component.errorText = "Enter a valid address."
@@ -177,13 +179,8 @@ class  TextAreaViewController: BaseViewController<TextArea> {
 
 extension TextAreaViewController: ComponentSampleable {
     static func makeSample() -> ComponentSample {
-        let component = Self.makeComponent()
-        component.width = 328
-        component.labelText = "Street Address"
-        component.helperText = "For example: 123 Verizon St"
-        component.errorText = "Enter a valid address."
-        component.tooltipModel = .init(title: "Check the formatting of your address",
-                                       content:"House/Building number then street name")
-        return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
+        let c = Self()
+        c.setupModel()
+        return ComponentSample(component: c.component)
     }
 }

VDSSample/ViewControllers/TextLinkCaretViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 
 class TextLinkCaretViewController: BaseViewController<TextLinkCaret> {
     
@@ -34,7 +34,7 @@ class TextLinkCaretViewController: BaseViewController<TextLinkCaret> {
         super.setupForm()  
         addFormRow(label: "Action", view: label)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
-        addFormRow(label: "Disabled", view: disabledSwitch)
+        addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
         addFormRow(label: "Label", view: textField)
         addFormRow(label: "Caret Position", view: caretPositionPickerSelectorView)
         

VDSSample/ViewControllers/TextLinkViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 
 class TextLinkViewController: BaseViewController<TextLink> {
     
@@ -36,7 +36,7 @@ class TextLinkViewController: BaseViewController<TextLink> {
         super.setupForm()  
         addFormRow(label: "Action", view: label)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
-        addFormRow(label: "Disabled", view: disabledSwitch)
+        addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
         addFormRow(label: "Label", view: textField)
         addFormRow(label: "Size", view: buttonSizePickerSelectorView)
         

VDSSample/ViewControllers/TileContainerViewController.swift

@@ -8,23 +8,11 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 import Combine
 
 class TileContainerViewController: BaseViewController<TileContainer> {
     
-    lazy var colorPicker: UIColorPickerViewController = {
-        let picker = UIColorPickerViewController()
-        picker.delegate = self
-        return picker
-    }()
-    
-    lazy var backgroundColorPickerSelectorView = {
-        PickerSelectorView(title: "white",
-                           picker: self.picker,
-                           items: BackgroundColor.allCases)
-    }()
-    
     lazy var imageFallbackColorPickerSelectorView = {
         SurfacePickerSelectorView(picker: self.picker)
     }()
@@ -59,12 +47,6 @@ class TileContainerViewController: BaseViewController<TileContainer> {
     var customPaddingRowView: UIView?
     var anyCancellable: AnyCancellable?
     
-    var contentAreaBackgroundColorButton = Button().with { instance in
-        instance.size = .small
-        instance.use = .secondary
-        instance.text = "Select"
-    }
-    
     var paddingTextField = NumericField().with {
         $0.placeholder = "Custom Padding"
     }
@@ -76,32 +58,128 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         $0.placeholder = "Minimum 100px else it will occupy full container"
     }
     
-    var colorPickerType: ColorPickerType = .backgroundColor
-    enum ColorPickerType {
-        case backgroundColor, gradientColor1, gradientColor2, contentViewBackgroundColor
-    }
-    
-    lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.gradientColor1) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
+    lazy var backgroundColorPickerSelectorView: TokenColorPickerSection  = {
+        TokenColorPickerSection<BackgroundColor>(rowTitle: "Background Color",
+                                picker: self.picker).with {
+            $0.onSelected = { [weak self] item in
+                guard let self else { return }
+                switch item {
+                case .primary:
+                    component.color = .primary
+                case .secondary:
+                    component.color = .secondary
+                case .white:
+                    component.color = .white
+                case .black:
+                    component.color = .black
+                default: break;
+                }
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                component.color = .custom(color.uiColor)
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                component.color = .custom(color)
+
+            }
         }
     }()
     
-    lazy var gradientColorView2: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.gradientColor2) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
+    lazy var gradientColorView1: ColorPickerView = {
+        return .init().with {
+            $0.onColorSelected =  { [weak self] _ in
+                guard let self else { return }
+                updateGradientColors()
+            }
+        }
+    }()
+    
+    lazy var gradientColorView2: ColorPickerView = {
+        return .init().with {
+            $0.onColorSelected =  { [weak self] _ in
+                guard let self else { return }
+                updateGradientColors()
+            }
         }
     }()
     
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: .makeWrapper(for: component))
-        component.width = 150
+        
+        let mainView = View()
+        mainView.backgroundColor = .purple
+        
+        ///top
+        let topView = View()
+        topView.backgroundColor = .yellow
+
+        let topLabel = Label()
+        topLabel.text = "Do you want to Register?"
+        
+        let topButton = Button()
+        topButton.text = "Register"
+        topButton.onClick = { c in print("clicked \(c.text!)") }
+        
+        ///bottom
+        let bottomView = View()
+        bottomView.backgroundColor = .green
+
+        let bottomLabel = Label()
+        bottomLabel.text = "Forgot your info?"
+
+        let bottomButton = Button()
+        bottomButton.text = "Forgot Password"
+        bottomButton.onClick = { c in print("clicked \(c.text!)") }
+
+        mainView.addSubview(topView)
+        mainView.addSubview(bottomView)
+        
+        topView.addSubview(topLabel)
+        topView.addSubview(topButton)
+
+        bottomView.addSubview(bottomLabel)
+        bottomView.addSubview(bottomButton)
+        let space: CGFloat = 5
+        topView
+            .pinTop(space*2)
+            .pinLeading(space*2)
+            .pinTrailing(space*2)
+            .pinBottom(anchor: bottomView.topAnchor, constant: space*2)
+        
+        topLabel
+            .pinTop(space)
+            .pinLeading(space)
+            .pinTrailing(space)
+            .pinBottom(anchor: topButton.topAnchor, constant: space)
+        
+        topButton
+            .pinBottom(space)
+            .pinLeading(space)
+            .pinTrailingLessThanOrEqualTo(anchor: nil, constant: space)
+
+        bottomView
+            .pinLeading(space*2)
+            .pinTrailing(space*2)
+            .pinBottom(space*2)
+
+        bottomLabel
+            .pinTop(space)
+            .pinLeading(space)
+            .pinTrailing(space)
+            .pinBottom(anchor: bottomButton.topAnchor, constant: space)
+        
+        bottomButton
+            .pinBottom(space)
+            .pinLeading(space)
+            .pinTrailingLessThanOrEqualTo(anchor: nil, constant: space)
+
         component.color = .secondary
         component.accessibilityLabel = "Tile Container"
-        component.addContentView(Label().with { $0.text = "Testing Label" })
+
+        addContentTopView(view: component)
+        component.addContentView(mainView)
         setupPicker()
         setupModel()
     }
@@ -116,22 +194,18 @@ class TileContainerViewController: BaseViewController<TileContainer> {
             $0.text = "For testing max width is limited to 85% of view's width & 65% view's height."
         })
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
-        addFormRow(label: "Is Link", view: isLinkSwitch)
-        addFormRow(label: "Clickable", view: clickableSwitch)
+        addFormRow(label: "Is Link", view: isLinkSwitch, pinTrailing: false)
+        addFormRow(label: "Clickable", view: clickableSwitch, pinTrailing: false)
         addFormRow(label: "Width", view: widthTextField)
         addFormRow(label: "Height", view: heightTextField)
-        addFormRow(label: "Show Border", view: showBorderSwitch)
-        addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch)
-        addFormRow(label: "Background Color", view: backgroundColorPickerSelectorView)
+        addFormRow(label: "Show Border", view: showBorderSwitch, pinTrailing: false)
+        addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch, pinTrailing: false)
+        append(section: backgroundColorPickerSelectorView)
         addFormRow(label: "Padding", view: paddingPickerSelectorView)
         customPaddingRowView = addFormRow(label: "Custom Padding", view: paddingTextField)
         customPaddingRowView?.isHidden = true
-        let rowView = addFormRow(label: "Content area BG color(only for padding validation)", view: contentAreaBackgroundColorButton)
-        if let rowView = rowView as? UIStackView {
-            rowView.alignment = .top
-        }
         addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView)
-        addFormRow(label: "Background Image", view: showBackgroundImageSwitch)
+        addFormRow(label: "Background Image", view: showBackgroundImageSwitch, pinTrailing: false)
         addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
         addFormRow(label: "Background Effect", view: backgroundEffectSelectorView)
         //Gradient Section
@@ -180,20 +254,35 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         heightTextField
             .numberPublisher
             .sink { [weak self] number in
-                guard let self else { return }
-                if let value = number?.cgFloatValue, value >= 100 && value < self.view.frame.height * 0.65 {
-                    self.component.height = value
-                    self.component.layoutIfNeeded()
+                guard let self, let number = number?.cgFloatValue else { 
+                    self?.heightTextField.text = ""
+                    return
+                }
+                if number >= 100 && number < self.view.frame.height * 0.65 {
+                    self.component.height = number
+                } else {
+                    self.component.height = nil
+                }
+                if let val = heightTextField.text, val.count > 2, number < 100 {
+                    heightTextField.text = ""
                 }
             }.store(in: &subscribers)
 
         widthTextField
             .numberPublisher
             .sink { [weak self] number in
-                guard let self else { return }
-                if let value = number?.cgFloatValue, value >= 100 && value < self.view.frame.width * 0.85 {
-                    self.component.width = value
-                    self.component.layoutIfNeeded()
+                self?.updateComponentConstraint(pinTrailing: number == nil)
+                guard let self, let number = number?.cgFloatValue else {
+                    self?.widthTextField.text = ""
+                    return
+                }
+                if number >= 100 && number < self.view.frame.width * 0.85 {
+                    self.component.width = number
+                } else {
+                    self.component.width = nil
+                }
+                if let val = widthTextField.text, val.count > 2, number < 100 {
+                    widthTextField.text = ""
                 }
             }.store(in: &subscribers)
     }
@@ -201,7 +290,7 @@ class TileContainerViewController: BaseViewController<TileContainer> {
     func setupModel() {
         //setup UI
         surfacePickerSelectorView.text = component.surface.rawValue
-        backgroundColorPickerSelectorView.text = backgroundColor.rawValue
+        backgroundColorPickerSelectorView.setDefault(value: backgroundColor)
         paddingPickerSelectorView.text = padding.rawValue
         scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
         widthTextField.text = component.width != nil ? "\(component.width!)" : ""
@@ -214,17 +303,7 @@ class TileContainerViewController: BaseViewController<TileContainer> {
             self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
-        
-        backgroundColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            guard let self else { return }
-            if let color = item.color {
-                self.component.color = color
-            } else {
-                self.colorPickerType = .backgroundColor
-                self.present(self.colorPicker, animated: true)
-            }
-        }
-        
+                
         backgroundEffectSelectorView.onPickerDidSelect = { [weak self] in
             guard let self else { return }
             if let effect = $0.effect {
@@ -233,7 +312,6 @@ class TileContainerViewController: BaseViewController<TileContainer> {
                 self.gradientColorView1.selectedColor = nil
                 self.gradientColorView2.selectedColor = nil
             } else {
-                self.colorPickerType = .gradientColor1
                 self.gradientColorsFormStackView.isHidden = false
             }
         }
@@ -257,12 +335,12 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         imageFallbackColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.imageFallbackColor = item
         }
-        
-        contentAreaBackgroundColorButton.onClick = { [weak self] _ in
-            guard let self else { return }
-            self.colorPickerType = .contentViewBackgroundColor
-            self.colorPicker.selectedColor = self.component.contentView.backgroundColor ?? .white
-            self.present(self.colorPicker, animated: true)
+    }
+    
+    func updateGradientColors(){
+        if let selectedGradient1Color = gradientColorView1.selectedColor,
+           let selectedGradient2Color = gradientColorView2.selectedColor{
+            component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
         }
     }
     
@@ -277,44 +355,6 @@ extension TileContainerViewController: ComponentSampleable {
     }
 }
 
-extension TileContainerViewController: UIColorPickerViewControllerDelegate {
-    
-    func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
-        let selectedColor = picker.selectedColor
-        if let selectedColor {
-            colorPicker.selectedColor = selectedColor
-        }
-        present(colorPicker, animated: true)
-    }
-    
-    func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
-        dismiss(animated: true)
-    }
-    
-    func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
-        let color = viewController.selectedColor
-        switch colorPickerType {
-        case .contentViewBackgroundColor:
-            component.contentView.backgroundColor = color
-        case .backgroundColor:
-            component.color = .custom(color)
-        case .gradientColor1:
-            gradientColorView1.selectedColor = viewController.selectedColor
-            updateGradientColors()
-        case .gradientColor2:
-            gradientColorView2.selectedColor = viewController.selectedColor
-            updateGradientColors()
-        }
-    }
-    
-    func updateGradientColors(){
-        if let selectedGradient1Color = gradientColorView1.selectedColor,
-           let selectedGradient2Color = gradientColorView2.selectedColor{
-            component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
-        }
-    }
-}
-
 extension TileContainerViewController {
     
     //Created new BackgroundEffect enum for sample app only. Since we defined enum with associated value color defined in TileContainer cannot be RawRepresentable & CaseIterable
@@ -347,7 +387,7 @@ extension TileContainerViewController {
     //Created new BackgroundColor enum for sample app only. Since we defined enum with associated value color defined in TileContainer cannot be RawRepresentable & CaseIterable
     enum BackgroundColor: String, CaseIterable {
         
-        case primary, secondary, white, black, custom
+        case primary, secondary, white, black, token, custom
         
         var color: TileContainer.BackgroundColor? {
             switch self {
@@ -359,6 +399,8 @@ extension TileContainerViewController {
                     .white
             case .black:
                     .black
+            case .token:
+                nil
             case .custom:
                 nil
             }

VDSSample/ViewControllers/TileletViewController.swift

@@ -8,11 +8,11 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 import Combine
 
 class TileletViewController: BaseViewController<Tilelet> {
-    
+
     lazy var titleStandardStylePickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
@@ -39,7 +39,7 @@ class TileletViewController: BaseViewController<Tilelet> {
     lazy var badgeFillColorPickerSelectorView = {
         PickerSelectorView(title: "red",
                            picker: self.picker,
-                           items: Badge.FillColor.allCases)
+                           items: BadgeViewController.FillColor.allCases)
     }()
     lazy var badgeNumberOfLinesPickerSelectorView = {
         PickerSelectorView(title: "one",
@@ -61,121 +61,287 @@ class TileletViewController: BaseViewController<Tilelet> {
                            items: TileContainerViewController.BackgroundEffect.allCases)
     }()
     
-    lazy var colorPicker: UIColorPickerViewController = {
-        let picker = UIColorPickerViewController()
-        picker.delegate = self
-        return picker
+    lazy var backgroundColorPickerSelectorView: TokenColorPickerSection  = {
+        TokenColorPickerSection<BackgroundColor>(
+            rowTitle: "Background Color",
+            rowTooltip: .init(title:"Background Color", content: "This color takes precedence over surface and will set all children's surface property to this value."),
+            picker: self.picker).with {
+                $0.onSelected = { [weak self] item in
+                    guard let self else { return }
+                    switch item {
+                    case .primary:
+                        component.color = .primary
+                    case .secondary:
+                        component.color = .secondary
+                    case .white:
+                        component.color = .white
+                    case .black:
+                        component.color = .black
+                    default: break;
+                    }
+                }
+                $0.onTokenSelected = { [weak self] color in
+                    guard let self else { return }
+                    component.color = .custom(color.uiColor)
+                }
+                $0.onColorSelected = { [weak self] color in
+                    guard let self else { return }
+                    component.color = .custom(color)
+                    
+                }
+            }
     }()
     
-    var colorPickerType: ColorPickerType = .backgroundColor
-    enum ColorPickerType {
-        case backgroundColor, gradientColor1, gradientColor2, contentViewBackgroundColor, light, dark
-    }
-    
-    lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.gradientColor1) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
+    lazy var gradientColorView1: ColorPickerView = {
+        return .init().with {
+            $0.onColorSelected =  { [weak self] _ in
+                guard let self else { return }
+                updateGradientColors()
+            }
         }
     }()
     
-    lazy var gradientColorView2: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.gradientColor2) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
+    lazy var gradientColorView2: ColorPickerView = {
+        return .init().with {
+            $0.onColorSelected =  { [weak self] _ in
+                guard let self else { return }
+                updateGradientColors()
+            }
         }
     }()
     
-    lazy var backgroundColorPickerSelectorView = {
-        PickerSelectorView(title: "white",
-                           picker: self.picker,
-                           items: BackgroundColor.allCases)
-    }()
-    
     lazy var textAlignmentPickerSelectorView = {
         PickerSelectorView(title: "left",
                            picker: self.picker,
                            items: TitleLockup.TextAlignment.allCases)
     }()
     
+    /// Badge
+    enum BadgeFillColor: String, CaseIterable {
+        case red, yellow, green, orange, blue, black, white, token, custom
+    }
+    
+    enum BadgeTextColor: String, CaseIterable {
+        case `default`, token, custom
+    }
+
+    var badgeFillColor: Badge.FillColor = .red { didSet { setBadgeModel() } }
+    lazy var badgeFillColorSection = {
+        TokenColorPickerSection<BadgeFillColor>(rowTitle: "Fill Color", picker: self.picker).with {
+            $0.onSelected = { [weak self] item in
+                guard let self else { return }
+                var fillColor: Badge.FillColor = .red
+                switch item {
+                case .red:
+                    fillColor = .red
+                case .yellow:
+                    fillColor = .yellow
+                case .green:
+                    fillColor = .green
+                case .orange:
+                    fillColor = .orange
+                case .blue:
+                    fillColor = .blue
+                case .black:
+                    fillColor = .black
+                case .white:
+                    fillColor = .white
+                default:
+                    break
+                }
+                badgeFillColor = fillColor
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                badgeFillColor = .token(color)
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                badgeFillColor = .custom(color)
+            }
+        }
+    }()
+    
+    var badgeTextColor: Badge.TextColor? { didSet { setBadgeModel() } }
+    lazy var badgeTextColorSection = {
+        TokenColorPickerSection<BadgeTextColor>(rowTitle: "Text Color", picker: self.picker).with {
+            $0.onSelected = { [weak self] item in
+                guard let self else { return }
+                badgeTextColor = nil
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                badgeTextColor = .token(color)
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                badgeTextColor = .custom(color)
+            }
+        }
+    }()
+    
     /// titleLockup
-    var currentLabelType: LabelType = .title
-    enum LabelType {
-        case eyebrow, title, subtitle
+    var currentSurfaceColorType: SurfaceColorType = .title
+    enum SurfaceColorType {
+        case background, eyebrow, title, subtitle, directionalIcon, descriptionIcon
     }
     
     enum TitleTextColor: String, CaseIterable {
-        case primary, custom
+        case primary, token, custom
     }
     
     enum TextColor: String, CaseIterable {
-        case primary, secondary, custom
+        case primary, secondary, token, custom
     }
     
+    enum IconColor: String, CaseIterable {
+        case `default`, token, custom
+    }
+        
     /// eyebrow
-    var eyebrowColorsFormStackView = FormSection().with { $0.isHidden = true }
-    lazy var eyebrowColorPickerSelectorView = {
-        PickerSelectorView(title: "primary",
+    var eyeBrowTextColor: TitleLockup.TextColor = .primary { didSet { setEyebrowModel() } }
+    lazy var eyebrowTextColorFormSection = {
+        TokenColorPickerSection<TextColor>(rowTitle: "Text Color", picker: self.picker).with {
+            $0.onSelected = { [weak self] item in
+                guard let self else { return }
+                switch item {
+                case .primary:
+                    eyeBrowTextColor = .primary
+                case .secondary:
+                    eyeBrowTextColor = .secondary
+                default: break
+                }
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                eyeBrowTextColor = .token(color)
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                eyeBrowTextColor = .custom(color)
+            }
+        }
+    }()
+    
+    var subtitleTextColor: TitleLockup.TextColor = .primary { didSet { setSubTitleModel() } }
+    lazy var subTitleTextColorFormSection = {
+        TokenColorPickerSection<TextColor>(rowTitle: "Text Color", picker: self.picker).with {
+            $0.onSelected = { [weak self] item in
+                guard let self else { return }
+                switch item {
+                case .primary:
+                    subtitleTextColor = .primary
+                case .secondary:
+                    subtitleTextColor = .secondary
+                default: break
+                }
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                subtitleTextColor = .token(color)
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                subtitleTextColor = .custom(color)
+            }
+        }
+    }()
+    
+    var titleTextColor: TitleLockup.TitleTextColor = .primary { didSet { setTitleModel() } }
+    lazy var titleTextColorFormSection = {
+        TokenColorPickerSection<TitleTextColor>(rowTitle: "Text Color", picker: self.picker).with {
+            $0.onSelected = { [weak self] item in
+                guard let self else { return }
+                switch item {
+                case .primary:
+                    titleTextColor = .primary
+                default: break
+                }
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                titleTextColor = .token(color)
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                titleTextColor = .custom(color)
+            }
+        }
+    }()
+    
+    ///Icons
+    var descriptionIconFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var descriptionNamePickerSelectorView = {
+        PickerSelectorView(title: "",
                            picker: self.picker,
-                           items: TextColor.allCases)
+                           items: Icon.Name.all.sorted{ $0.rawValue < $1.rawValue })
+    }()
+    
+    lazy var descriptionIconSizePickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Icon.Size.allCases)
     }()
 
-    lazy var eyebrowLightColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.light) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
+    var descriptionIconColor: Tilelet.IconColor? = .token(.paletteWhite) { didSet { setDescriptiveIconModel() } }
+    lazy var descriptionIconColorFormSection = {
+        TokenColorPickerSection<IconColor>(picker: self.picker).with {
+            $0.onSelected = { [weak self] item in
+                guard let self else { return }
+                switch item {
+                case .default:
+                    descriptionIconColor = nil
+                default: break
+                }
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                descriptionIconColor = .token(color)
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                descriptionIconColor = .custom(color)
+            }
+            $0.isHidden = true
         }
     }()
     
-    lazy var eyebrowDarkColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
-        }
-    }()
-    
-    /// title
-    var titleColorsFormStackView = FormSection().with { $0.isHidden = true }
-    lazy var titleColorPickerSelectorView = {
-        PickerSelectorView(title: "primary",
+
+    var directionalIconFormStackView = FormSection().with { $0.isHidden = true }
+
+    lazy var directionIconPickerSelectorView = {
+        PickerSelectorView(title: "",
                            picker: self.picker,
-                           items: TitleTextColor.allCases)
-    }()
-    lazy var titleLightColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.light) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
-        }
-    }()
-    
-    lazy var titleDarkColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
-        }
-    }()
-    
-    /// subtitle
-    var subtitleColorsFormStackView = FormSection().with { $0.isHidden = true }
-    lazy var subtitleColorPickerSelectorView = {
-        PickerSelectorView(title: "primary",
-                           picker: self.picker,
-                           items: TextColor.allCases)
-    }()
-    lazy var subtitleLightColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.light) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
-        }
-    }()
-    
-    lazy var subtitleDarkColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
-        }
+                           items: Tilelet.DirectionalIcon.IconType.allCases.sorted{ $0.rawValue < $1.rawValue })
     }()
 
+    lazy var directionIconSizePickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Tilelet.DirectionalIcon.IconSize.allCases.sorted{ $0.rawValue < $1.rawValue })
+    }()
+    var directionIconColor: Tilelet.IconColor? = .token(.paletteWhite) { didSet { setDirectionalIconModel() } }
+    lazy var directionIconColorFormSection = {
+        TokenColorPickerSection<IconColor>(picker: self.picker).with {
+            $0.onSelected = { [weak self] item in
+                guard let self else { return }
+                switch item {
+                case .default:
+                    directionIconColor = nil
+                default: break
+                }
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                directionIconColor = .token(color)
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                directionIconColor = .custom(color)
+            }
+            $0.isHidden = true
+        }
+    }()
     
     let backgroundImage = UIImage(named: "backgroundTest")!
     var clickableSwitch = Toggle()
@@ -199,12 +365,13 @@ class TileletViewController: BaseViewController<Tilelet> {
     var backgroundColor: BackgroundColor = .black
     var maxWidthTextField = NumericField()
     var isLinkSwitch = Toggle()
+    var descriptionIconAccessibilityTextField = TextField()
 
     var gradientColorsFormStackView = FormSection().with { $0.isHidden = true }
     
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: .makeWrapper(for: component))
+        addContentTopView(view: component)
         setupPicker()
         setupModel()
     }
@@ -213,8 +380,8 @@ class TileletViewController: BaseViewController<Tilelet> {
         super.setupForm()
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addActionRow()
-        addFormRow(label: "Is Link", view: isLinkSwitch)
-        addFormRow(label: "Clickable", view: clickableSwitch)
+        addFormRow(label: "Is Link", view: isLinkSwitch, pinTrailing: false)
+        addFormRow(label: "Clickable", view: clickableSwitch, pinTrailing: false)
                 
         addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView)
         addFormRow(label: "Padding", view: paddingPickerSelectorView)
@@ -224,9 +391,9 @@ class TileletViewController: BaseViewController<Tilelet> {
         addFormRow(label: "Text Width", view: textWidthTextField)
         addFormRow(label: "Text Percentage", view: textPercentageTextField)
         addFormRow(label: "Text Position", tooltip: .init(title:"Text Position", content: "Minimum height is configurable"), view: textPositionPickerSelectorView)
-        addFormRow(label: "Background Color", tooltip: .init(title:"Background Color", content: "This color takes precedence over surface and will set all children's surface property to this value."), view: backgroundColorPickerSelectorView)
-        addFormRow(label: "Background Image", view: showBackgroundImageSwitch)
-        addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch)
+        append(section: backgroundColorPickerSelectorView)
+        addFormRow(label: "Background Image", view: showBackgroundImageSwitch, pinTrailing: false)
+        addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch, pinTrailing: false)
         addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
         addFormRow(label: "Background Effect", view: backgroundEffectSelectorView)
         //Gradient Section
@@ -237,49 +404,57 @@ class TileletViewController: BaseViewController<Tilelet> {
         append(section: .init().with({
             $0.title = "Badge"
             $0.addFormRow(label: "Text", view: badgeTextField)
-            $0.addFormRow(label: "Fill Color", view: badgeFillColorPickerSelectorView)
             $0.addFormRow(label: "Number of Lines", view: badgeNumberOfLinesPickerSelectorView)
             $0.addFormRow(label: "Max Width", view: maxWidthTextField)
         }))
+        append(section: badgeFillColorSection)
+        append(section: badgeTextColorSection)
 
         append(section: .init().with({
-            $0.title = "Eyebrow"
-            $0.addFormRow(label: "Text Style", tooltip: .init(title: "Text Style", content: "Eyebrow and Subtitle will share the same textStyle."), view: otherStandardStylePickerSelectorView)
-            $0.addFormRow(label: "is Bold", view: eyebrowIsBold)
-            $0.addFormRow(label: "Text", view: eyebrowTextField)
-            $0.addFormRow(label: "Color", view: eyebrowColorPickerSelectorView)
+            $0.title = "Text Styles"
+            $0.addFormRow(label: "Title", view: titleStandardStylePickerSelectorView)
+            $0.addFormRow(label: "Eyebrow/Subtitle", view: otherStandardStylePickerSelectorView)
         }))
         
-        eyebrowColorsFormStackView.addFormRow(label: "Light", view: eyebrowLightColorView)
-        eyebrowColorsFormStackView.addFormRow(label: "Dark", view: eyebrowDarkColorView)
-        append(section: eyebrowColorsFormStackView)
+        append(section: .init().with({
+            $0.title = "Eyebrow"
+            $0.addFormRow(label: "is Bold", view: eyebrowIsBold, pinTrailing: false)
+            $0.addFormRow(label: "Text", view: eyebrowTextField)
+        }))
+        append(section: eyebrowTextColorFormSection)
 
         append(section: .init().with({
             $0.title = "Title"
-            $0.addFormRow(label: "Text Style", view: titleStandardStylePickerSelectorView)
-            $0.addFormRow(label: "is Bold", view: titleIsBold)
+            $0.addFormRow(label: "is Bold", view: titleIsBold, pinTrailing: false)
             $0.addFormRow(label: "Text", view: titleTextField)
-            $0.addFormRow(label: "Color", view: titleColorPickerSelectorView)
         }))
-        titleColorsFormStackView.addFormRow(label: "Light", view: titleLightColorView)
-        titleColorsFormStackView.addFormRow(label: "Dark", view: titleDarkColorView)
-        append(section: titleColorsFormStackView)
+        append(section: titleTextColorFormSection)
 
         append(section: .init().with({
             $0.title = "Subtitle"
             $0.addFormRow(label: "Text", view: subTitleTextField)
-            $0.addFormRow(label: "Color", view: subtitleColorPickerSelectorView)
         }))
-        subtitleColorsFormStackView.addFormRow(label: "Light", view: subtitleLightColorView)
-        subtitleColorsFormStackView.addFormRow(label: "Dark", view: subtitleDarkColorView)
-        append(section: subtitleColorsFormStackView)
+        append(section: subTitleTextColorFormSection)
 
         append(section: .init().with({
-            $0.title = "Icons"
-            $0.addFormRow(label: "Description", view: showDescriptionIconSwitch)
-            $0.addFormRow(label: "Directional", view: showDirectionalIconSwitch)
+            $0.title = "Description Icon "
+            $0.addFormRow(label: "Show", view: showDescriptionIconSwitch, pinTrailing: false)
         }))
-
+        append(section: descriptionIconFormStackView)
+        descriptionIconFormStackView.addFormRow(label: "Icon", view: descriptionNamePickerSelectorView)
+        descriptionIconFormStackView.addFormRow(label: "Accessibility", view: descriptionIconAccessibilityTextField)
+        descriptionIconFormStackView.addFormRow(label: "Size", view: descriptionIconSizePickerSelectorView)
+        append(section: descriptionIconColorFormSection)
+        
+        append(section: .init().with({
+            $0.title = "Directional Icon"
+            $0.addFormRow(label: "Show", view: showDirectionalIconSwitch, pinTrailing: false)
+        }))
+        append(section: directionalIconFormStackView)
+        directionalIconFormStackView.addFormRow(label: "Icon", view: directionIconPickerSelectorView)
+        directionalIconFormStackView.addFormRow(label: "Size", view: directionIconSizePickerSelectorView)
+        append(section: directionIconColorFormSection)
+        
         clickableSwitch.onChange = { [weak self] sender in
             guard let self else { return }
             if sender.isOn {
@@ -297,20 +472,35 @@ class TileletViewController: BaseViewController<Tilelet> {
         heightTextField
             .numberPublisher
             .sink { [weak self] number in
-                guard let self else { return }
-                if let value = number?.cgFloatValue, value >= 100 && value < self.view.frame.height * 0.65 {
-                    self.component.height = value
-                    self.component.layoutIfNeeded()
+                guard let self, let number = number?.cgFloatValue else {
+                    self?.heightTextField.text = ""
+                    return
+                }
+                if number >= 100 && number < self.view.frame.height * 0.65 {
+                    self.component.height = number
+                } else {
+                    self.component.height = nil
+                }
+                if let val = heightTextField.text, val.count > 2, number < 100 {
+                    heightTextField.text = ""
                 }
             }.store(in: &subscribers)
-        
+
         widthTextField
             .numberPublisher
             .sink { [weak self] number in
-                guard let self else { return }
-                if let value = number?.cgFloatValue, value >= 100 && value < self.view.frame.width * 0.85 {
-                    self.component.width = value
-                    self.component.layoutIfNeeded()
+                self?.updateComponentConstraint(pinTrailing: number == nil)
+                guard let self, let number = number?.cgFloatValue else {
+                    self?.widthTextField.text = ""
+                    return
+                }
+                if number >= 100 && number < self.view.frame.width * 0.85 {
+                    self.component.width = number
+                } else {
+                    self.component.width = nil
+                }
+                if let val = widthTextField.text, val.count > 2, number < 100 {
+                    widthTextField.text = ""
                 }
             }.store(in: &subscribers)
         
@@ -355,21 +545,19 @@ class TileletViewController: BaseViewController<Tilelet> {
             }.store(in: &subscribers)
         
         showDescriptionIconSwitch.onChange = { [weak self] sender in
-            if sender.isOn {
-                self?.showDirectionalIconSwitch.isOn = false
-                self?.component.descriptiveIconModel = .init(size: .medium)
-            } else {
-                self?.component.descriptiveIconModel = nil
-            }
+            guard let self else { return }
+            self.setDescriptionIconForm()
         }
         
+        descriptionIconAccessibilityTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.setDescriptiveIconModel()
+            }.store(in: &subscribers)
+
         showDirectionalIconSwitch.onChange = { [weak self] sender in
-            if sender.isOn {
-                self?.showDescriptionIconSwitch.isOn = false
-                self?.component.directionalIconModel = .init(size: .medium)
-            } else {
-                self?.component.directionalIconModel = nil
-            }
+            guard let self else { return }
+            self.setDirectionalIconForm()
         }
 
         eyebrowIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
@@ -412,7 +600,7 @@ class TileletViewController: BaseViewController<Tilelet> {
                 self?.component.badgeModel?.maxWidth = number.cgFloatValue
             }.store(in: &subscribers)
     }
-    
+
     func setupModel() {
         let titleModel = Tilelet.TitleModel(text: "Save $XX on your monthly bill.")
         let subTitleModel = Tilelet.SubTitleModel(text: "Enroll in Auto Pay & paper-free billing to save on your monthly bill.")
@@ -422,7 +610,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         component.subTitleModel = subTitleModel
         component.padding = .small
         //setup UI
-        backgroundColorPickerSelectorView.text = backgroundColor.rawValue
+        backgroundColorPickerSelectorView.setDefault(value: backgroundColor)
         textAlignmentPickerSelectorView.text = TextAlignment.left.rawValue
         surfacePickerSelectorView.text = component.surface.rawValue
         otherStandardStylePickerSelectorView.text = subTitleModel.otherStandardStyle.rawValue
@@ -433,12 +621,67 @@ class TileletViewController: BaseViewController<Tilelet> {
         textPositionPickerSelectorView.text = component.textPostion.rawValue
         scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
         updateOtherTextStyles()
+        
+        descriptionNamePickerSelectorView.text = Icon.Name.multipleDocuments.rawValue
+        descriptionIconSizePickerSelectorView.text = Icon.Size.medium.rawValue
+        
+        directionIconPickerSelectorView.text = Tilelet.DirectionalIcon.IconType.rightArrow.rawValue
+        directionIconSizePickerSelectorView.text = Tilelet.DirectionalIcon.IconSize.medium.rawValue
+        
+        badgeFillColorSection.setDefault(value: .red)
+        badgeTextColorSection.setDefault(value: .default)
+
+        eyebrowTextColorFormSection.setDefault(value: .primary)
+        titleTextColorFormSection.setDefault(value: .primary)
+        subTitleTextColorFormSection.setDefault(value: .primary)
+        
+        descriptionIconColorFormSection.setDefault(value: .token)
+        directionIconColorFormSection.setDefault(value: .token)
+    }
+    
+    func setIconColorForms() {
+        setDirectionalIconColorForm()
+        setDescriptionIconColorForm()
+    }
+    
+    func setDirectionalIconColorForm() {
+        directionIconColorFormSection.isHidden = !showDirectionalIconSwitch.isOn
+    }
+    
+    func setDescriptionIconColorForm() {
+        descriptionIconColorFormSection.isHidden = !showDescriptionIconSwitch.isOn
+    }
+    
+    func setDescriptionIconForm() {
+        let showForm = showDescriptionIconSwitch.isOn
+        descriptionIconFormStackView.isHidden = !showForm
+        directionalIconFormStackView.isHidden = true
+        if showForm {
+            showDirectionalIconSwitch.isOn = false
+            setDescriptiveIconModel()
+        } else {
+            component.descriptiveIconModel = nil
+        }
+        setIconColorForms()
+    }
+    
+    func setDirectionalIconForm() {
+        let showForm = showDirectionalIconSwitch.isOn
+        directionalIconFormStackView.isHidden = !showForm
+        descriptionIconFormStackView.isHidden = true
+        if showForm {
+            showDescriptionIconSwitch.isOn = false
+            setDirectionalIconModel()
+        } else {
+            component.directionalIconModel = nil
+        }
+        setIconColorForms()
     }
     
     //sub models
     func setBadgeModel() {
         if let text = badgeTextField.text, !text.isEmpty {
-            component.badgeModel = Tilelet.BadgeModel(text: text, fillColor: badgeFillColorPickerSelectorView.selectedItem, numberOfLines: badgeNumberOfLinesPickerSelectorView.selectedItem.intValue)
+            component.badgeModel = Tilelet.BadgeModel(text: text, textColor: badgeTextColor, fillColor: badgeFillColor, numberOfLines: badgeNumberOfLinesPickerSelectorView.selectedItem.intValue)
         } else {
             component.badgeModel = nil
         }
@@ -446,20 +689,7 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     func setTitleModel() {
         if let text = titleTextField.text, !text.isEmpty {
-            var textColor: TitleLockup.TitleTextColor
-            switch titleColorPickerSelectorView.selectedItem {
-            case .primary:
-                textColor = .primary
-            case .custom:
-                if let light = titleLightColorView.selectedColor {
-                    let dark = titleDarkColorView.selectedColor ?? light
-                    textColor = .custom(light, dark)
-                } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
-                }
-            }
-            
-            component.titleModel = Tilelet.TitleModel(text: text, textColor: textColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
+            component.titleModel = Tilelet.TitleModel(text: text, textColor: titleTextColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
         } else {
             component.titleModel = nil
         }
@@ -467,22 +697,7 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     func setSubTitleModel() {
         if let text = subTitleTextField.text, !text.isEmpty {
-            var textColor: TitleLockup.TextColor
-            switch subtitleColorPickerSelectorView.selectedItem {
-            case .primary:
-                textColor = .primary
-            case .secondary:
-                textColor = .secondary
-            case .custom:
-                if let light = subtitleLightColorView.selectedColor {
-                    let dark = subtitleDarkColorView.selectedColor ?? light
-                    textColor = .custom(light, dark)
-                } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
-                }
-            }
-
-            component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem, textColor: textColor)
+            component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem, textColor: subtitleTextColor)
         } else {
             component.subTitleModel = nil
         }
@@ -490,27 +705,37 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     func setEyebrowModel() {
         if let text = eyebrowTextField.text, !text.isEmpty {
-            var textColor: TitleLockup.TextColor
-            switch eyebrowColorPickerSelectorView.selectedItem {
-            case .primary:
-                textColor = .primary
-            case .secondary:
-                textColor = .secondary
-            case .custom:
-                if let light = eyebrowLightColorView.selectedColor {
-                    let dark = eyebrowDarkColorView.selectedColor ?? light
-                    textColor = .custom(light, dark)
-                } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
-                }
-            }
-
-            component.eyebrowModel = Tilelet.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
+            component.eyebrowModel = Tilelet.EyebrowModel(text: text, textColor: eyeBrowTextColor, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
         } else {
             component.eyebrowModel = nil
         }
     }
     
+    func setDescriptiveIconModel() {
+        let iconSize = descriptionIconSizePickerSelectorView.selectedItem
+        let iconName = descriptionNamePickerSelectorView.selectedItem
+        var accessibleText: String?
+        if let at = descriptionIconAccessibilityTextField.text, !at.isEmpty {
+            accessibleText = at
+        }
+        
+        component.descriptiveIconModel = .init(name: iconName, iconColor: descriptionIconColor, size: iconSize, accessibleText: accessibleText ?? nil )
+    }
+    
+    func setDirectionalIconModel() {
+        let iconType = directionIconPickerSelectorView.selectedItem
+        let iconSize = directionIconSizePickerSelectorView.selectedItem
+
+        component.directionalIconModel = .init(iconType: iconType, iconColor: directionIconColor, size: iconSize)
+    }
+    
+    func updateGradientColors(){
+        if let selectedGradient1Color = gradientColorView1.selectedColor,
+           let selectedGradient2Color = gradientColorView2.selectedColor{
+            component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
+        }
+    }
+    
     func updateOtherTextStyles() {
         let items = component.titleLockup.standardStyleConfiguration.configuration(for: titleStandardStylePickerSelectorView.selectedItem.value)!.allOtherStandardStyles
         let otheritems = items.compactMap { Tilelet.SubTitleModel.OtherStandardStyle(rawValue: $0.rawValue)! }
@@ -541,10 +766,6 @@ class TileletViewController: BaseViewController<Tilelet> {
             self.component.textPostion = item
         }
         
-        badgeFillColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.badgeModel?.fillColor = item
-        }
-        
         badgeNumberOfLinesPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.badgeModel?.numberOfLines = item.intValue
         }
@@ -563,7 +784,6 @@ class TileletViewController: BaseViewController<Tilelet> {
                 self.gradientColorView1.selectedColor = nil
                 self.gradientColorView2.selectedColor = nil
             } else {
-                self.colorPickerType = .gradientColor1
                 self.gradientColorsFormStackView.isHidden = false
             }
         }
@@ -571,39 +791,21 @@ class TileletViewController: BaseViewController<Tilelet> {
         textAlignmentPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.titleLockup.textAlignment = item
         }
-        
-        backgroundColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            guard let self else { return }
-            if let color = self.getTilelet(backgroundColor: item) {
-                self.component.color = color
-            } else {
-                self.colorPickerType = .backgroundColor
-                self.present(self.colorPicker, animated: true)
-            }            
+                    
+        descriptionNamePickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setDescriptiveIconModel()
         }
         
-        eyebrowColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.currentLabelType = .eyebrow
-            self?.eyebrowColorsFormStackView.isHidden = item != .custom
-            if item != .custom {
-                self?.setEyebrowModel()
-            }
+        descriptionIconSizePickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setDescriptiveIconModel()
+        }
+
+        directionIconPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setDirectionalIconModel()
         }
         
-        titleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.currentLabelType = .title
-            self?.titleColorsFormStackView.isHidden = item != .custom
-            if item != .custom {
-                self?.setTitleModel()
-            }
-        }
-        
-        subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.currentLabelType = .subtitle
-            self?.subtitleColorsFormStackView.isHidden = item != .custom
-            if item != .custom {
-                self?.setSubTitleModel()
-            }
+        directionIconSizePickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setDirectionalIconModel()
         }
 
     }
@@ -631,6 +833,8 @@ class TileletViewController: BaseViewController<Tilelet> {
                 .black
         case .custom:
                 nil
+        case .token:
+                nil
         }
     }
 }
@@ -649,80 +853,11 @@ extension TileletViewController: ComponentSampleable {
     }
 }
 
-extension TileletViewController: UIColorPickerViewControllerDelegate {
-    
-    func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
-        let selectedColor = picker.selectedColor
-        if let selectedColor {
-            colorPicker.selectedColor = selectedColor
-        }
-        present(colorPicker, animated: true)
-    }
-    
-    func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
-        dismiss(animated: true)
-    }
-    
-    func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
-        let color = viewController.selectedColor 
-        var lightColorView: ColorPickerView<ColorPickerType>
-        var darkColorView: ColorPickerView<ColorPickerType>
-        switch colorPickerType {
-        case .contentViewBackgroundColor:
-            component.contentView.backgroundColor = color
-        case .backgroundColor:
-            component.color = .custom(color)
-        case .gradientColor1:
-            gradientColorView1.selectedColor = viewController.selectedColor
-            updateGradientColors()
-        case .gradientColor2:
-            gradientColorView2.selectedColor = viewController.selectedColor
-            updateGradientColors()
-            
-        case .light, .dark:
-            var lightColorView: ColorPickerView<ColorPickerType>
-            var darkColorView: ColorPickerView<ColorPickerType>
-            
-            switch currentLabelType {
-            case .eyebrow:
-                lightColorView = eyebrowLightColorView
-                darkColorView = eyebrowDarkColorView
-            case .title:
-                lightColorView = titleLightColorView
-                darkColorView = titleDarkColorView
-            case .subtitle:
-                lightColorView = subtitleLightColorView
-                darkColorView = subtitleDarkColorView
-            }
-            if colorPickerType == .light {
-                lightColorView.selectedColor = viewController.selectedColor
-            } else {
-                darkColorView.selectedColor = viewController.selectedColor
-            }
-            switch currentLabelType {
-            case .eyebrow:
-                setEyebrowModel()
-            case .title:
-                setTitleModel()
-            case .subtitle:
-                setSubTitleModel()
-            }
-        }
-    }
-    
-    func updateGradientColors(){
-        if let selectedGradient1Color = gradientColorView1.selectedColor,
-           let selectedGradient2Color = gradientColorView2.selectedColor{
-            component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
-        }
-    }
-}
-
 extension TileletViewController {
     
     enum BackgroundColor: String, CaseIterable {
         
-        case primary, secondary, white, black, custom
+        case primary, secondary, white, black, token, custom
         
         var color: TileContainer.BackgroundColor? {
             switch self {
@@ -734,6 +869,8 @@ extension TileletViewController {
                     .white
             case .black:
                     .black
+            case .token:
+                    nil
             case .custom:
                     nil
             }

VDSSample/ViewControllers/TitleLockupViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 
 class TitleLockupViewController: BaseViewController<TitleLockup> {
 
@@ -36,98 +36,88 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
     var titleTextField = TextField()
     var subTitleTextField = TextField()
 
-    /// **********************************************
-    /// Text Color
-    lazy var colorPicker: UIColorPickerViewController = {
-        let picker = UIColorPickerViewController()
-        picker.delegate = self
-        return picker
-    }()
-    
-    var currentLabelType: LabelType = .title
-    var colorPickerType: ColorPickerType = .light
-    
-    enum LabelType {
-        case eyebrow, title, subtitle
-    }
-    
     enum TitleTextColor: String, CaseIterable {
-        case primary, custom
+        case primary, token, custom
     }
     
     enum TextColor: String, CaseIterable {
-        case primary, secondary, custom
+        case primary, secondary, token, custom
     }
-    
-    enum ColorPickerType {
-        case light, dark
-    }
-    
+        
     /// eyebrow
-    var eyebrowColorsFormStackView = FormSection().with { $0.isHidden = true }
-    lazy var eyebrowColorPickerSelectorView = {
-        PickerSelectorView(title: "primary",
-                           picker: self.picker,
-                           items: TextColor.allCases)
-    }()
-
-    lazy var eyebrowLightColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.light) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
+    var eyeBrowTextColor: TitleLockup.TextColor = .primary { didSet { setOtherModels() } }
+    lazy var eyebrowTextColorFormSection = {
+        TokenColorPickerSection<TextColor>(rowTitle: "Text Color",
+                                picker: self.picker).with {
+            $0.onSelected = { [weak self] item in
+                guard let self else { return }
+                switch item {
+                case .primary:
+                    eyeBrowTextColor = .primary
+                case .secondary:
+                    eyeBrowTextColor = .secondary
+                default: break
+                }
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                eyeBrowTextColor = .token(color)
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                eyeBrowTextColor = .custom(color)
+            }
         }
     }()
     
-    lazy var eyebrowDarkColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
+    var subtitleTextColor: TitleLockup.TextColor = .primary { didSet { setOtherModels() } }
+    lazy var subTitleTextColorFormSection = {
+        TokenColorPickerSection<TextColor>(rowTitle: "Text Color",
+                                picker: self.picker).with {
+            $0.onSelected = { [weak self] item in
+                guard let self else { return }
+                switch item {
+                case .primary:
+                    subtitleTextColor = .primary
+                case .secondary:
+                    subtitleTextColor = .secondary
+                default: break
+                }
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                subtitleTextColor = .token(color)
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                subtitleTextColor = .custom(color)
+            }
         }
     }()
     
-    /// title
-    var titleColorsFormStackView = FormSection().with { $0.isHidden = true }
-    lazy var titleColorPickerSelectorView = {
-        PickerSelectorView(title: "primary",
-                           picker: self.picker,
-                           items: TitleTextColor.allCases)
-    }()
-    lazy var titleLightColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.light) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
+    var titleTextColor: TitleLockup.TitleTextColor = .primary { didSet { setTitleModel() } }
+    lazy var titleTextColorFormSection = {
+        TokenColorPickerSection<TitleTextColor>(rowTitle: "Text Color",
+                                picker: self.picker).with {
+            $0.onSelected = { [weak self] item in
+                guard let self else { return }
+                switch item {
+                case .primary:
+                    titleTextColor = .primary
+                default: break
+                }
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                titleTextColor = .token(color)
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                titleTextColor = .custom(color)
+            }
         }
     }()
-    
-    lazy var titleDarkColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
-        }
-    }()
-    
-    /// subtitle
-    var subtitleColorsFormStackView = FormSection().with { $0.isHidden = true }
-    lazy var subtitleColorPickerSelectorView = {
-        PickerSelectorView(title: "primary",
-                           picker: self.picker,
-                           items: TextColor.allCases)
-    }()
-    lazy var subtitleLightColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.light) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
-        }
-    }()
-    
-    lazy var subtitleDarkColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
-        }
-    }()
-
-
+        
     override func viewDidLoad() {
         super.viewDidLoad()
         addContentTopView(view: component)
@@ -141,28 +131,32 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Text Alignment", view: textAlignmentPickerSelectorView)
 
-        addFormRow(label: "Eyebrow/Subtitle Style", view: otherStandardStylePickerSelectorView)
-        addFormRow(label: "Eyebrow is Bold", view: eyebrowIsBold)
-        addFormRow(label: "Eyebrow Text", view: eyebrowTextField)
-        addFormRow(label: "Eyebrow Color", view: eyebrowColorPickerSelectorView)
-        eyebrowColorsFormStackView.addFormRow(label: "Light", view: eyebrowLightColorView)
-        eyebrowColorsFormStackView.addFormRow(label: "Dark", view: eyebrowDarkColorView)
-        append(section: eyebrowColorsFormStackView)
+        append(section: .init().with({
+            $0.title = "Text Styles"
+            $0.addFormRow(label: "Title", view: titleStandardStylePickerSelectorView)
+            $0.addFormRow(label: "Eyebrow/Subtitle", view: otherStandardStylePickerSelectorView)
+        }))
 
-        addFormRow(label: "Title is Bold", view: titleIsBold)
-        addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView)
-        addFormRow(label: "Title Text", view: titleTextField)
-        addFormRow(label: "Title Color", view: titleColorPickerSelectorView)
-        titleColorsFormStackView.addFormRow(label: "Light", view: titleLightColorView)
-        titleColorsFormStackView.addFormRow(label: "Dark", view: titleDarkColorView)
-        append(section: titleColorsFormStackView)
-
-        addFormRow(label: "Subtitle Text", view: subTitleTextField)
-        addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
-        subtitleColorsFormStackView.addFormRow(label: "Light", view: subtitleLightColorView)
-        subtitleColorsFormStackView.addFormRow(label: "Dark", view: subtitleDarkColorView)
-        append(section: subtitleColorsFormStackView)
+        append(section: .init().with({
+            $0.title = "\nEyebrow"
+            $0.addFormRow(label: "is Bold", view: eyebrowIsBold, pinTrailing: false)
+            $0.addFormRow(label: "Text", view: eyebrowTextField)
+        }))
         
+        append(section: eyebrowTextColorFormSection)
+
+        append(section: .init().with({
+            $0.title = "\nTitle"
+            $0.addFormRow(label: "is Bold", view: titleIsBold, pinTrailing: false)
+            $0.addFormRow(label: "Text", view: titleTextField)
+        }))
+        append(section: titleTextColorFormSection)
+
+        append(section: .init().with({
+            $0.title = "\nSubtitle"
+            $0.addFormRow(label: "Subtitle Text", view: subTitleTextField)
+        }))
+        append(section: subTitleTextColorFormSection)
         
         eyebrowIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
             self?.setOtherModels()
@@ -209,6 +203,10 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         titleTextField.text = titleModel.text
         subTitleTextField.text = subTitleModel.text
         
+        eyebrowTextColorFormSection.setDefault(value: .primary)
+        titleTextColorFormSection.setDefault(value: .primary)
+        subTitleTextColorFormSection.setDefault(value: .primary)
+        
         setTitleModel()
         updateOtherTextStyles()
     }
@@ -217,20 +215,7 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         var titleTextStyle: TextStyle?
         if let text = titleTextField.text, !text.isEmpty {
             
-            var textColor: TitleLockup.TitleTextColor
-            switch titleColorPickerSelectorView.selectedItem {
-            case .primary:
-                textColor = .primary
-            case .custom:
-                if let light = titleLightColorView.selectedColor {
-                    let dark = titleDarkColorView.selectedColor ?? light
-                    textColor = .custom(light, dark)
-                } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
-                }
-            }
-
-            component.titleModel = TitleLockup.TitleModel(text: text, textColor: textColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
+            component.titleModel = TitleLockup.TitleModel(text: text, textColor: titleTextColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
             titleTextStyle = titleIsBold.isOn ? titleStandardStylePickerSelectorView.selectedItem.value.bold : titleStandardStylePickerSelectorView.selectedItem.value.regular
         } else {
             component.titleModel = nil
@@ -249,41 +234,14 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         let style = otherStandardStylePickerSelectorView.selectedItem
     
         if let text = subTitleTextField.text, !text.isEmpty {
-            var textColor: TitleLockup.TextColor
-            switch subtitleColorPickerSelectorView.selectedItem {
-            case .primary:
-                textColor = .primary
-            case .secondary:
-                textColor = .secondary
-            case .custom:
-                if let light = subtitleLightColorView.selectedColor {
-                    let dark = subtitleDarkColorView.selectedColor ?? light
-                    textColor = .custom(light, dark)
-                } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
-                }
-            }
-            component.subTitleModel = TitleLockup.SubTitleModel(text: text, otherStandardStyle: style, textColor: textColor)
+            component.subTitleModel = TitleLockup.SubTitleModel(text: text, otherStandardStyle: style, textColor: subtitleTextColor)
             debug(type: "SubTitle", textStyle: style.value.regular)
         } else {
             component.subTitleModel = nil
         }
         
         if let text = eyebrowTextField.text, !text.isEmpty {
-            var textColor: TitleLockup.TextColor
-            switch eyebrowColorPickerSelectorView.selectedItem {
-            case .primary:
-                textColor = .primary
-            case .secondary:
-                textColor = .secondary
-            case .custom:
-                if let light = eyebrowLightColorView.selectedColor {
-                    let dark = eyebrowDarkColorView.selectedColor ?? light
-                    textColor = .custom(light, dark)
-                } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
-                }            }
-            component.eyebrowModel = TitleLockup.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: style)
+            component.eyebrowModel = TitleLockup.EyebrowModel(text: text, textColor: eyeBrowTextColor, isBold: eyebrowIsBold.isOn, standardStyle: style)
             debug(type: "EyeBrow", textStyle: eyebrowIsBold.isOn ? style.value.bold : style.value.regular)
             
         } else {
@@ -315,31 +273,6 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         otherStandardStylePickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.setOtherModels()
         }
-
-        
-        eyebrowColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.currentLabelType = .eyebrow
-            self?.eyebrowColorsFormStackView.isHidden = item != .custom
-            if item != .custom {
-                self?.setOtherModels()
-            }
-        }
-        
-        titleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.currentLabelType = .title
-            self?.titleColorsFormStackView.isHidden = item != .custom
-            if item != .custom {
-                self?.setTitleModel()
-            }
-        }
-        
-        subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.currentLabelType = .subtitle
-            self?.subtitleColorsFormStackView.isHidden = item != .custom
-            if item != .custom {
-                self?.setOtherModels()
-            }
-        }
     }
 }
 
@@ -356,48 +289,3 @@ extension TitleLockupViewController: ComponentSampleable {
         return ComponentSample(component: component)
     }
 }
-
-extension TitleLockupViewController: UIColorPickerViewControllerDelegate {
-    
-    func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
-        let selectedColor = picker.selectedColor
-        if let selectedColor {
-            colorPicker.selectedColor = selectedColor
-        }
-        present(colorPicker, animated: true)
-    }
-    
-    func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
-        dismiss(animated: true)
-    }
-    
-    func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
-        guard let hexString = viewController.selectedColor.hexString else { return }
-        var lightColorView: ColorPickerView<ColorPickerType>
-        var darkColorView: ColorPickerView<ColorPickerType>
-        
-        switch currentLabelType {
-        case .eyebrow:
-            lightColorView = eyebrowLightColorView
-            darkColorView = eyebrowDarkColorView
-        case .title:
-            lightColorView = titleLightColorView
-            darkColorView = titleDarkColorView
-        case .subtitle:
-            lightColorView = subtitleLightColorView
-            darkColorView = subtitleDarkColorView
-        }
-        switch colorPickerType {
-        case .light:
-            lightColorView.selectedColor = viewController.selectedColor
-        case .dark:
-            darkColorView.selectedColor = viewController.selectedColor
-        }
-        
-        if currentLabelType == .title {
-            setTitleModel()
-        } else {
-            setOtherModels()
-        }
-    }
-}

VDSSample/ViewControllers/ToggleViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 
 class ToggleViewController: BaseViewController<Toggle> {
     
@@ -36,7 +36,7 @@ class ToggleViewController: BaseViewController<Toggle> {
 
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: component.makeWrapper(edgeSpacing: 16.0), edgeSpacing: 0)
+        addContentTopView(view: component, pinTrailing: false)
 
         setupPicker()
     }
@@ -44,12 +44,12 @@ class ToggleViewController: BaseViewController<Toggle> {
     override func setupForm() {
         super.setupForm()
         addActionRow()
-        addFormRow(label: "Show Text", view: showTextSwitch)
+        addFormRow(label: "Show Text", view: showTextSwitch, pinTrailing: false)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
-        addFormRow(label: "Disabled", view: disabledSwitch)
+        addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
         
         //add the hidden elements to textFormStackView
-        textFormStackView.addFormRow(label: "Bold", view: boldSwitch)
+        textFormStackView.addFormRow(label: "Bold", view: boldSwitch, pinTrailing: false)
         textFormStackView.addFormRow(label: "Text Size", view: textSizePickerSelectorView)
         textFormStackView.addFormRow(label: "Text Position", view: textPositionPickerSelectorView)
         textFormStackView.addFormRow(label: "On Text", view: onTextField)

VDSSample/ViewControllers/TooltipViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 import Combine
 
 class  TooltipViewController: BaseViewController<Tooltip> {
@@ -32,15 +32,14 @@ class  TooltipViewController: BaseViewController<Tooltip> {
 
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: .makeWrapper(for: component, edgeSpacing: 16.0), edgeSpacing: 0.0)
-        
+        addContentTopView(view: component, pinTrailing: false)
         setupPicker()
         setupModel()
     }
     
     override func setupForm(){
         super.setupForm()
-        addFormRow(label: "Disabled", view: disabledSwitch)
+        addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Size", view: sizePickerSelectorView)
         addFormRow(label: "FillColor", view: fillColorPickerSelectorView)

VDSSample/ViewControllers/TrailingTooltipLabelViewController.swift

@@ -8,7 +8,7 @@
 import Foundation
 import UIKit
 import VDS
-import VDSTokens
+import VDSCoreTokens
 
 class TrailingTooltipLabelViewController: BaseViewController<TrailingTooltipLabel> {
 
@@ -40,16 +40,15 @@ class TrailingTooltipLabelViewController: BaseViewController<TrailingTooltipLabe
 
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: .makeWrapper(for: component, edgeSpacing: 16.0), edgeSpacing: 0.0)
-
+        addContentTopView(view: component, pinTrailing: false)
         setupPicker()
         setupModel()
     }
     
     override func setupForm(){
         super.setupForm()  
-        addFormRow(label: "Disabled", view: disabledSwitch)
-        addFormRow(label: "Bold", view: boldSwitch)
+        addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
+        addFormRow(label: "Bold", view: boldSwitch, pinTrailing: false)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Text Alignment", view: textAlignmentPickerSelectorView)
         addFormRow(label: "Font Category", view: fontCategoryPickerSelectorView)

workspaceSettings.xcconfig

@@ -0,0 +1,11 @@
+//
+//  workspaceSettings.xcconfig
+//  
+//
+//  Created by Matt Bruce on 6/3/24.
+//
+
+// Configuration settings file format documentation can be found at:
+// https://help.apple.com/xcode/#/dev745c5c974
+
+VDS_ADD_CHANGELOG_FILES = 1