Merge branch 'develop' of ssh://git@192.168.1.128:220/mbrucedogs/vds_ios.git into develop

Signed-off-by: Matt Bruce <mbrucedogs@gmail.com>

VDS.xcodeproj/project.pbxproj

@@ -10,6 +10,10 @@
 		180636C72C29B0A400C92D86 /* InputStepper.swift in Sources */ = {isa = PBXBuildFile; fileRef = 180636C62C29B0A400C92D86 /* InputStepper.swift */; };
 		180636C92C29B0DF00C92D86 /* InputStepperLog.txt in Resources */ = {isa = PBXBuildFile; fileRef = 180636C82C29B0DF00C92D86 /* InputStepperLog.txt */; };
 		1808BEBC2BA41C3200129230 /* CarouselScrollbar.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1808BEBB2BA41C3200129230 /* CarouselScrollbar.swift */; };
+		1818D04D2C9BD2170053E73C /* ModalDialogViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1818D04C2C9BD2170053E73C /* ModalDialogViewController.swift */; };
+		1818D04F2C9BD3F60053E73C /* ModalDialog.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1818D04E2C9BD3F60053E73C /* ModalDialog.swift */; };
+		1818D0512C9BD4090053E73C /* ModalLaunchable.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1818D0502C9BD4090053E73C /* ModalLaunchable.swift */; };
+		1818D0532C9BD47C0053E73C /* ModalModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1818D0522C9BD47C0053E73C /* ModalModel.swift */; };
 		1832AC572BA0791D008AE476 /* BreadcrumbCellItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1832AC562BA0791D008AE476 /* BreadcrumbCellItem.swift */; };
 		183B16F32C78CF7C00BA6A10 /* CarouselSlotCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 183B16F22C78CF7C00BA6A10 /* CarouselSlotCell.swift */; };
 		183B16F72C80B32200BA6A10 /* FootnoteGroup.swift in Sources */ = {isa = PBXBuildFile; fileRef = 183B16F62C80B32200BA6A10 /* FootnoteGroup.swift */; };
@@ -19,6 +23,8 @@
 		1842B1E12BECE7B70021AFCA /* CalendarHeaderReusableView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1842B1E02BECE7B70021AFCA /* CalendarHeaderReusableView.swift */; };
 		1842B1E32BECF0A20021AFCA /* CalendarFooterReusableView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1842B1E22BECF0A10021AFCA /* CalendarFooterReusableView.swift */; };
 		1855EC662BAABF2A002ACAC2 /* BreadcrumbItemModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1855EC652BAABF2A002ACAC2 /* BreadcrumbItemModel.swift */; };
+		1859B30F2CBF6FEB0031CD70 /* ListUnordered.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1859B30E2CBF6FDD0031CD70 /* ListUnordered.swift */; };
+		1859B31B2CBFA0180031CD70 /* ListUnorderedItemModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1859B31A2CBFA0180031CD70 /* ListUnorderedItemModel.swift */; };
 		186D13CB2BBA8B1500986B53 /* DropdownSelect.swift in Sources */ = {isa = PBXBuildFile; fileRef = 186D13CA2BBA8B1500986B53 /* DropdownSelect.swift */; };
 		18792A902B7431F2008C0D29 /* ButtonIconBadgeIndicatorModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18792A8F2B7431F2008C0D29 /* ButtonIconBadgeIndicatorModel.swift */; };
 		18926F5B2C7616A500C55BF6 /* FootnoteItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18926F5A2C7616A500C55BF6 /* FootnoteItem.swift */; };
@@ -30,6 +36,8 @@
 		18B42AC62C09D197008D6262 /* CarouselSlotAlignmentModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18B42AC52C09D197008D6262 /* CarouselSlotAlignmentModel.swift */; };
 		18B463A42BBD3C46005C4528 /* DropdownOptionModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18B463A32BBD3C46005C4528 /* DropdownOptionModel.swift */; };
 		18B9763F2C11BA4A009271DF /* CarouselPaginationModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18B9763E2C11BA4A009271DF /* CarouselPaginationModel.swift */; };
+		18C0F9462C98175900E1DD71 /* Modal.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18C0F9452C98175900E1DD71 /* Modal.swift */; };
+		18C0F94A2C9817C100E1DD71 /* ModalChangeLog.txt in Resources */ = {isa = PBXBuildFile; fileRef = 18C0F9492C9817C100E1DD71 /* ModalChangeLog.txt */; };
 		18FEA1AD2BDD137500A56439 /* CalendarIndicatorModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18FEA1AC2BDD137500A56439 /* CalendarIndicatorModel.swift */; };
 		18FEA1B52BE0E63600A56439 /* Date+Extension.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18FEA1B42BE0E63600A56439 /* Date+Extension.swift */; };
 		445BA07829C07B3D0036A7C5 /* Notification.swift in Sources */ = {isa = PBXBuildFile; fileRef = 445BA07729C07B3D0036A7C5 /* Notification.swift */; };
@@ -221,6 +229,10 @@
 		180636C82C29B0DF00C92D86 /* InputStepperLog.txt */ = {isa = PBXFileReference; lastKnownFileType = text; path = InputStepperLog.txt; sourceTree = "<group>"; };
 		1808BEBB2BA41C3200129230 /* CarouselScrollbar.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CarouselScrollbar.swift; sourceTree = "<group>"; };
 		1808BEBF2BA456B700129230 /* CarouselScrollbarChangeLog.txt */ = {isa = PBXFileReference; lastKnownFileType = text; path = CarouselScrollbarChangeLog.txt; sourceTree = "<group>"; };
+		1818D04C2C9BD2170053E73C /* ModalDialogViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ModalDialogViewController.swift; sourceTree = "<group>"; };
+		1818D04E2C9BD3F60053E73C /* ModalDialog.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ModalDialog.swift; sourceTree = "<group>"; };
+		1818D0502C9BD4090053E73C /* ModalLaunchable.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ModalLaunchable.swift; sourceTree = "<group>"; };
+		1818D0522C9BD47C0053E73C /* ModalModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ModalModel.swift; sourceTree = "<group>"; };
 		1832AC562BA0791D008AE476 /* BreadcrumbCellItem.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BreadcrumbCellItem.swift; sourceTree = "<group>"; };
 		183B16F22C78CF7C00BA6A10 /* CarouselSlotCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CarouselSlotCell.swift; sourceTree = "<group>"; };
 		183B16F62C80B32200BA6A10 /* FootnoteGroup.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FootnoteGroup.swift; sourceTree = "<group>"; };
@@ -231,6 +243,9 @@
 		1842B1E22BECF0A10021AFCA /* CalendarFooterReusableView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CalendarFooterReusableView.swift; sourceTree = "<group>"; };
 		18450CF02BA1B19C009FDF2A /* BreadcrumbsChangeLog.txt */ = {isa = PBXFileReference; lastKnownFileType = text; path = BreadcrumbsChangeLog.txt; sourceTree = "<group>"; };
 		1855EC652BAABF2A002ACAC2 /* BreadcrumbItemModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BreadcrumbItemModel.swift; sourceTree = "<group>"; };
+		1859B30E2CBF6FDD0031CD70 /* ListUnordered.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ListUnordered.swift; sourceTree = "<group>"; };
+		1859B3122CBF70AB0031CD70 /* ListUnordered.txt */ = {isa = PBXFileReference; lastKnownFileType = text; path = ListUnordered.txt; sourceTree = "<group>"; };
+		1859B31A2CBFA0180031CD70 /* ListUnorderedItemModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ListUnorderedItemModel.swift; sourceTree = "<group>"; };
 		186B2A892B88DA7F001AB71F /* TextAreaChangeLog.txt */ = {isa = PBXFileReference; lastKnownFileType = text; path = TextAreaChangeLog.txt; sourceTree = "<group>"; };
 		186D13CA2BBA8B1500986B53 /* DropdownSelect.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DropdownSelect.swift; sourceTree = "<group>"; };
 		186D13CE2BBC36EE00986B53 /* DropdownSelectChangeLog.txt */ = {isa = PBXFileReference; lastKnownFileType = text; path = DropdownSelectChangeLog.txt; sourceTree = "<group>"; };
@@ -246,6 +261,8 @@
 		18B463A32BBD3C46005C4528 /* DropdownOptionModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DropdownOptionModel.swift; sourceTree = "<group>"; };
 		18B9763E2C11BA4A009271DF /* CarouselPaginationModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CarouselPaginationModel.swift; sourceTree = "<group>"; };
 		18BDEE812B75316E00452358 /* ButtonIconChangeLog.txt */ = {isa = PBXFileReference; lastKnownFileType = text; path = ButtonIconChangeLog.txt; sourceTree = "<group>"; };
+		18C0F9452C98175900E1DD71 /* Modal.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Modal.swift; sourceTree = "<group>"; };
+		18C0F9492C9817C100E1DD71 /* ModalChangeLog.txt */ = {isa = PBXFileReference; lastKnownFileType = text; path = ModalChangeLog.txt; sourceTree = "<group>"; };
 		18FEA1AC2BDD137500A56439 /* CalendarIndicatorModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CalendarIndicatorModel.swift; sourceTree = "<group>"; };
 		18FEA1B42BE0E63600A56439 /* Date+Extension.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Date+Extension.swift"; sourceTree = "<group>"; };
 		18FEA1B82BE1301700A56439 /* CalendarChangeLog.txt */ = {isa = PBXFileReference; lastKnownFileType = text; path = CalendarChangeLog.txt; sourceTree = "<group>"; };
@@ -496,6 +513,16 @@
 			path = PriceLockup;
 			sourceTree = "<group>";
 		};
+		1859B30D2CBF6EF80031CD70 /* ListUnordered */ = {
+			isa = PBXGroup;
+			children = (
+				1859B30E2CBF6FDD0031CD70 /* ListUnordered.swift */,
+				1859B31A2CBFA0180031CD70 /* ListUnorderedItemModel.swift */,
+				1859B3122CBF70AB0031CD70 /* ListUnordered.txt */,
+			);
+			path = ListUnordered;
+			sourceTree = "<group>";
+		};
 		186D13C92BBA8A3500986B53 /* DropdownSelect */ = {
 			isa = PBXGroup;
 			children = (
@@ -554,6 +581,19 @@
 			path = Carousel;
 			sourceTree = "<group>";
 		};
+		18C0F9442C980CE500E1DD71 /* Modal */ = {
+			isa = PBXGroup;
+			children = (
+				18C0F9452C98175900E1DD71 /* Modal.swift */,
+				1818D04E2C9BD3F60053E73C /* ModalDialog.swift */,
+				1818D04C2C9BD2170053E73C /* ModalDialogViewController.swift */,
+				1818D0502C9BD4090053E73C /* ModalLaunchable.swift */,
+				1818D0522C9BD47C0053E73C /* ModalModel.swift */,
+				18C0F9492C9817C100E1DD71 /* ModalChangeLog.txt */,
+			);
+			path = Modal;
+			sourceTree = "<group>";
+		};
 		440B84C82BD8E0CE004A732A /* Table */ = {
 			isa = PBXGroup;
 			children = (
@@ -734,7 +774,9 @@
 				180636C52C29B06200C92D86 /* InputStepper */,
 				EA3362412892EF700071C351 /* Label */,
 				44604AD529CE195300E62B51 /* Line */,
+				1859B30D2CBF6EF80031CD70 /* ListUnordered */,
 				EAD0688C2A55F801002E3A2D /* Loader */,
+				18C0F9442C980CE500E1DD71 /* Modal */,
 				445BA07629C07ABA0036A7C5 /* Notification */,
 				71B23C2B2B91FA510027F7D9 /* Pagination */,
 				184023432C61E78D00A412C8 /* PriceLockup */,
@@ -1245,6 +1287,7 @@
 				EA3362062891E14D0071C351 /* VerizonNHGeTX-Regular.otf in Resources */,
 				EA3362052891E14D0071C351 /* VerizonNHGeDS-Bold.otf in Resources */,
 				180636C92C29B0DF00C92D86 /* InputStepperLog.txt in Resources */,
+				18C0F94A2C9817C100E1DD71 /* ModalChangeLog.txt in Resources */,
 				EAA5EEB928ECD24B003B3210 /* Icons.xcassets in Resources */,
 				EAA5EEE428F5B855003B3210 /* VerizonNHGDS-Light.otf in Resources */,
 			);
@@ -1320,6 +1363,7 @@
 				EA6642952BCEBF9500D81DC4 /* TextLinkModel.swift in Sources */,
 				71FC86E22B97483000700965 /* Clamping.swift in Sources */,
 				EAF7F0B3289B1ADC00B287F5 /* ActionLabelAttribute.swift in Sources */,
+				1859B30F2CBF6FEB0031CD70 /* ListUnordered.swift in Sources */,
 				1855EC662BAABF2A002ACAC2 /* BreadcrumbItemModel.swift in Sources */,
 				EAC925832911B35400091998 /* TextLinkCaret.swift in Sources */,
 				EA33622E2891EA3C0071C351 /* DispatchQueue+Once.swift in Sources */,
@@ -1330,6 +1374,7 @@
 				EA8141102A127066004F60D2 /* UIColor+VDSColor.swift in Sources */,
 				EAF7F0AF289B144C00B287F5 /* UnderlineLabelAttribute.swift in Sources */,
 				EA0D1C412A6AD61C00E5C127 /* Typography+Additional.swift in Sources */,
+				18C0F9462C98175900E1DD71 /* Modal.swift in Sources */,
 				EAC925842911C63100091998 /* Colorable.swift in Sources */,
 				18B463A42BBD3C46005C4528 /* DropdownOptionModel.swift in Sources */,
 				EAF2F4762C231EAA007BFEDC /* AccessibilityActionElement.swift in Sources */,
@@ -1347,6 +1392,7 @@
 				EA596ABD2A16B4EC00300C4B /* Tab.swift in Sources */,
 				71ACE89E2BA1CC1700FB6ADC /* TiletEyebrowModel.swift in Sources */,
 				EAF7F11728A1475A00B287F5 /* RadioButtonItem.swift in Sources */,
+				1818D0512C9BD4090053E73C /* ModalLaunchable.swift in Sources */,
 				EA985BEE2968A92400F2FF2E /* TitleLockupSubTitleModel.swift in Sources */,
 				EA2DC9B22BE175E6004F58C5 /* CharacterCountRule.swift in Sources */,
 				EA985BF22968B5BB00F2FF2E /* TitleLockupTextStyle.swift in Sources */,
@@ -1385,6 +1431,7 @@
 				EAD8D2C128BFDE8B006EB6A6 /* UIGestureRecognizer+Publisher.swift in Sources */,
 				18B42AC62C09D197008D6262 /* CarouselSlotAlignmentModel.swift in Sources */,
 				71B23C2D2B91FA690027F7D9 /* Pagination.swift in Sources */,
+				1859B31B2CBFA0180031CD70 /* ListUnorderedItemModel.swift in Sources */,
 				EA0D1C372A681CCE00E5C127 /* ToggleView.swift in Sources */,
 				EAF7F0B9289C139800B287F5 /* ColorConfiguration.swift in Sources */,
 				EA3361BD288B2C760071C351 /* TypeAlias.swift in Sources */,
@@ -1399,6 +1446,7 @@
 				EAF2F4892C2A1075007BFEDC /* AlertViewController.swift in Sources */,
 				EA0D1C3D2A6AD57600E5C127 /* Typography+Enums.swift in Sources */,
 				EAF1FE9B29DB1A6000101452 /* Changeable.swift in Sources */,
+				1818D04F2C9BD3F60053E73C /* ModalDialog.swift in Sources */,
 				EAC58C0C2BED01D500BA39FA /* Telephone.swift in Sources */,
 				EAF7F0A2289AFB3900B287F5 /* Errorable.swift in Sources */,
 				EA8E40912A7D3F6300934ED3 /* UIView+Accessibility.swift in Sources */,
@@ -1451,6 +1499,7 @@
 				EAB5FED429267EB300998C17 /* UIView+NSLayoutConstraint.swift in Sources */,
 				EAB2376829E9992800AABE9A /* TooltipAlertViewController.swift in Sources */,
 				EA33623E2892EE950071C351 /* UIDevice.swift in Sources */,
+				1818D04D2C9BD2170053E73C /* ModalDialogViewController.swift in Sources */,
 				EA985C692971B90B00F2FF2E /* IconSize.swift in Sources */,
 				71FC86E02B973AE500700965 /* DropShadowConfiguration.swift in Sources */,
 				EA3362302891EB4A0071C351 /* Font.swift in Sources */,
@@ -1459,6 +1508,7 @@
 				EAB5FEF12927F4AA00998C17 /* SelfSizingCollectionView.swift in Sources */,
 				184023452C61E7AD00A412C8 /* PriceLockup.swift in Sources */,
 				EA3361B8288B2AAA0071C351 /* ViewProtocol.swift in Sources */,
+				1818D0532C9BD47C0053E73C /* ModalModel.swift in Sources */,
 				EA3361A8288B23300071C351 /* UIColor.swift in Sources */,
 				EA2DC9B42BE2C6FE004F58C5 /* TextField.swift in Sources */,
 				EAC58C182BED0E2300BA39FA /* SecurityCode.swift in Sources */,
@@ -1621,7 +1671,7 @@
 				BUILD_LIBRARY_FOR_DISTRIBUTION = YES;
 				CODE_SIGN_IDENTITY = "";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 73;
+				CURRENT_PROJECT_VERSION = 75;
 				DEFINES_MODULE = YES;
 				DEVELOPMENT_TEAM = "";
 				DYLIB_COMPATIBILITY_VERSION = 1;
@@ -1659,7 +1709,7 @@
 				BUILD_LIBRARY_FOR_DISTRIBUTION = YES;
 				CODE_SIGN_IDENTITY = "";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 73;
+				CURRENT_PROJECT_VERSION = 75;
 				DEFINES_MODULE = YES;
 				DEVELOPMENT_TEAM = "";
 				DYLIB_COMPATIBILITY_VERSION = 1;

VDS/BaseClasses/Control.swift

@@ -10,7 +10,6 @@ import UIKit
 import Combine
 
 /// Base Class use to build Controls.
-@objcMembers
 @objc(VDSControl)
 open class Control: UIControl, ViewProtocol, UserInfoable, Clickable {
     //--------------------------------------------------

VDS/BaseClasses/Selector/SelectorBase.swift

@@ -28,7 +28,6 @@ public protocol SelectorControlable: Control, Changeable {
 }
 
 /// Base Class used to build out a Selector control.
-@objcMembers
 @objc(VDSSelectorBase)
 open class SelectorBase: Control, SelectorControlable, ParentViewProtocol {
     

VDS/BaseClasses/View.swift

@@ -10,7 +10,6 @@ import UIKit
 import Combine
 
 /// Base Class used to build Views.
-@objcMembers
 @objc(VDSView)
 open class View: UIView, ViewProtocol, UserInfoable, Clickable {
     

VDS/Classes/AlertViewController.swift

@@ -10,7 +10,6 @@ import UIKit
 import Combine
 import VDSCoreTokens
 
-@objcMembers
 @objc(VDSAlertViewController)
 open class AlertViewController: UIViewController, Surfaceable {
     

VDS/Classes/ClearPopoverViewController.swift

@@ -8,7 +8,6 @@
 import Foundation
 import UIKit
 
-@objcMembers
 @objc(VDSClearPopoverViewController)
 open class ClearPopoverViewController: UIViewController, UIPopoverPresentationControllerDelegate {
     

VDS/Components/Badge/Badge.swift

@@ -15,7 +15,6 @@ import Combine
 /// If you are using AutoLayoutConstraints you have a combination of Leading/Left and Trailing/Right NSLayoutConstraints,
 /// you need to ensure that one of these Horizontal Contraints is not constraint of "equatTo".  If you are to pin the left/right edges
 /// to its parent this object will stretch to the parent's width.
-@objcMembers
 @objc(VDSBadge)
 open class Badge: View, ParentViewProtocol {
     
@@ -38,8 +37,16 @@ open class Badge: View, ParentViewProtocol {
     // MARK: - Enums
     //--------------------------------------------------
     /// Enum used to describe the primary color for the view.
-    public enum FillColor: String, CaseIterable {
+    public enum FillColor: Equatable {
         case red, yellow, green, orange, blue, black, white
+        case token(UIColor.VDSColor)
+        case custom(UIColor)
+        
+        private var reflectedValue: String { String(reflecting: self) }
+        
+        public static func == (lhs: Self, rhs: Self) -> Bool {
+            lhs.reflectedValue == rhs.reflectedValue
+        }
     }
     
     //--------------------------------------------------
@@ -65,6 +72,8 @@ open class Badge: View, ParentViewProtocol {
     /// The text that will be shown in the label.
     open var text: String = "" { didSet { setNeedsUpdate() }}
     
+    open var textColor: TextColor? { didSet { setNeedsUpdate() }}
+    
     /// When applied, this property takes a px value  that will restrict the width at that point.
     open var maxWidth: CGFloat? { didSet { setNeedsUpdate() }}
     
@@ -93,25 +102,71 @@ open class Badge: View, ParentViewProtocol {
                                                  right: VDSLayout.space1X)
     
     /// ColorConfiguration that is mapped to the 'fillColor' for the surface.
-    private var backgroundColorConfiguration: AnyColorable = {
+    private var backgroundColorConfiguration = SurfaceColorConfiguration()
-        let config = KeyedColorConfiguration<Badge, FillColor>(keyPath: \.fillColor)
-        config.setSurfaceColors(VDSColor.badgesBackgroundRedOnlight, VDSColor.badgesBackgroundRedOndark, forKey: .red)
-        config.setSurfaceColors(VDSColor.badgesBackgroundYellowOnlight, VDSColor.badgesBackgroundYellowOndark, forKey: .yellow)
-        config.setSurfaceColors(VDSColor.badgesBackgroundGreenOnlight, VDSColor.badgesBackgroundGreenOndark, forKey: .green)
-        config.setSurfaceColors(VDSColor.badgesBackgroundOrangeOnlight, VDSColor.badgesBackgroundOrangeOndark, forKey: .orange)
-        config.setSurfaceColors(VDSColor.badgesBackgroundBlueOnlight, VDSColor.badgesBackgroundBlueOndark, forKey: .blue)
-        config.setSurfaceColors(VDSColor.badgesBackgroundBlackOnlight, VDSColor.badgesBackgroundBlackOndark, forKey: .black)
-        config.setSurfaceColors(VDSColor.badgesBackgroundWhiteOnlight, VDSColor.badgesBackgroundWhiteOndark, forKey: .white)
-        return config.eraseToAnyColorable()
-    }()
     
     /// ColorConfiguration for the Text.
     private var textColorConfiguration = ViewColorConfiguration()
     
     /// Updates the textColorConfiguration based on the fillColor.
-    public func updateTextColorConfig() {
+    public func updateColorConfig() {
+        var config = backgroundColorConfiguration
+        switch fillColor {
+        case .red:
+            config.lightColor = VDSColor.badgesBackgroundRedOnlight
+            config.darkColor = VDSColor.badgesBackgroundRedOndark
+        case .yellow:
+            config.lightColor = VDSColor.badgesBackgroundYellowOnlight
+            config.darkColor = VDSColor.badgesBackgroundYellowOndark
+        case .green:
+            config.lightColor = VDSColor.badgesBackgroundGreenOnlight
+            config.darkColor = VDSColor.badgesBackgroundGreenOndark
+        case .orange:
+            config.lightColor = VDSColor.badgesBackgroundOrangeOnlight
+            config.darkColor = VDSColor.badgesBackgroundOrangeOndark
+        case .blue:
+            config.lightColor = VDSColor.badgesBackgroundBlueOnlight
+            config.darkColor = VDSColor.badgesBackgroundBlueOndark
+        case .black:
+            config.lightColor = VDSColor.badgesBackgroundBlackOnlight
+            config.darkColor = VDSColor.badgesBackgroundBlackOndark
+        case .white:
+            config.lightColor = VDSColor.badgesBackgroundWhiteOnlight
+            config.darkColor = VDSColor.badgesBackgroundWhiteOndark
+        case .token(let color):
+            config.lightColor = color.uiColor
+            config.darkColor = color.uiColor
+        case .custom(let color):
+            config.lightColor = color
+            config.darkColor = color
+        }
+        
         textColorConfiguration.reset()
         
+        func update(for color: UIColor) {
+            if let configuration = textColor?.configuration {
+                textColorConfiguration = configuration
+            } else {
+                if color.isDark() {
+                    textColorConfiguration.setSurfaceColors(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOndark, forDisabled: false)
+                    textColorConfiguration.setSurfaceColors(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOndark, forDisabled: true)
+                } else {
+                    textColorConfiguration.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOnlight, forDisabled: false)
+                    textColorConfiguration.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOnlight, forDisabled: true)
+
+                }
+            }
+        }
+                
+        if let textColor {
+            switch textColor {
+            case .token(let color):
+                textColorConfiguration.setSurfaceColors(color.uiColor, color.uiColor, forDisabled: false)
+                textColorConfiguration.setSurfaceColors(color.uiColor, color.uiColor, forDisabled: true)
+            case .custom(let color):
+                textColorConfiguration.setSurfaceColors(color, color, forDisabled: false)
+                textColorConfiguration.setSurfaceColors(color, color, forDisabled: true)
+            }
+        } else {
             switch fillColor {
                 
             case .red, .black:
@@ -125,6 +180,13 @@ open class Badge: View, ParentViewProtocol {
             case .orange, .green, .blue:
                 textColorConfiguration.setSurfaceColors(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOnlight, forDisabled: false)
                 textColorConfiguration.setSurfaceColors(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOnlight, forDisabled: true)
+                
+            case .token(let color):
+                update(for: color.uiColor)
+                
+            case .custom(let color):
+                update(for: color)
+            }
         }
     }
     
@@ -179,7 +241,7 @@ open class Badge: View, ParentViewProtocol {
     open override func updateView() {
         super.updateView()
         
-        updateTextColorConfig()
+        updateColorConfig()
         updateMaxWidth()
 
         backgroundColor = backgroundColorConfiguration.getColor(self)
@@ -191,3 +253,29 @@ open class Badge: View, ParentViewProtocol {
         label.isEnabled = isEnabled
     }
 }
+
+extension Badge{
+    public enum TextColor: Equatable {
+        case token(UIColor.VDSColor)
+        case custom(UIColor)
+        
+        private var reflectedValue: String { String(reflecting: self) }
+        
+        public static func == (lhs: Self, rhs: Self) -> Bool {
+            lhs.reflectedValue == rhs.reflectedValue
+        }
+        
+        public var configuration: ViewColorConfiguration {
+            let config = ViewColorConfiguration()
+            switch self {
+            case .token(let color):
+                config.setSurfaceColors(color.uiColor, color.uiColor, forDisabled: true)
+                config.setSurfaceColors(color.uiColor, color.uiColor, forDisabled: false)
+            case .custom(let color):
+                config.setSurfaceColors(color, color, forDisabled: true)
+                config.setSurfaceColors(color, color, forDisabled: false)
+            }
+            return config
+        }
+    }
+}

VDS/Components/BadgeIndicator/BadgeIndicator.swift

@@ -11,7 +11,6 @@ import VDSCoreTokens
 import Combine
 
 /// A badge indicator is a visual label used to convey status or highlight supplemental information.
-@objcMembers
 @objc(VDSBadgeIndicator)
 open class BadgeIndicator: View, ParentViewProtocol {
     

VDS/Components/Breadcrumbs/BreadcrumbItem.swift

@@ -13,7 +13,6 @@ import Combine
 /// A Breadcrumb Item contains href(link) and selected flag.
 /// Breadcrumb links to its respective page if it is not disabled.
 /// Breadcrumb contains text with a separator by default, highlights text in bold without a separator if selected.
-@objcMembers
 @objc (VDSBreadcrumbItem)
 open class BreadcrumbItem: ButtonBase {
    

VDS/Components/Breadcrumbs/Breadcrumbs.swift

@@ -13,7 +13,6 @@ import Combine
 /// A Breadcrumbs contains BreadcrumbItems. 
 /// It contains Breadcrumb Item Default, Breadcrumb Item Selected, Separator.
 /// Breadcrumbs are secondary navigation that use a hierarchy of internal links to tell customers where they are in an experience. Each breadcrumb links to its respective page, except for that of current page.
-@objcMembers
 @objc(VDSBreadcrumbs)
 open class Breadcrumbs: View, ParentViewProtocol {
     

VDS/Components/Buttons/Button/Button.swift

@@ -15,7 +15,6 @@ import Combine
 /// If you are using AutoLayoutConstraints you have a combination of Leading/Left and Trailing/Right NSLayoutConstraints,
 /// you need to ensure that one of these Horizontal Contraints is not constraint of "equatTo".  If you are to pin the left/right edges
 /// to its parent this object will stretch to the parent's width.
-@objcMembers
 @objc(VDSButton)
 open class Button: ButtonBase, Useable {
     

VDS/Components/Buttons/ButtonBase.swift

@@ -11,7 +11,6 @@ import VDSCoreTokens
 import Combine
 
 /// Base class used for UIButton type classes.
-@objcMembers
 @objc(VDSButtonBase)
 open class ButtonBase: UIButton, ViewProtocol, UserInfoable, Clickable {
     

VDS/Components/Buttons/ButtonGroup/ButtonGroup.swift

@@ -11,7 +11,6 @@ import VDSCoreTokens
 import Combine
 
 /// A button group contains combinations of related CTAs including ``Button``, ``TextLink``, and ``TextLinkCaret``. This group component controls a combination's orientation, spacing, size and allowable size pairings.
-@objcMembers
 @objc(VDSButtonGroup)
 open class ButtonGroup: View {
     

VDS/Components/Buttons/TextLink/TextLink.swift

@@ -16,7 +16,6 @@ import Combine
 /// If you are using AutoLayoutConstraints you have a combination of Leading/Left and Trailing/Right NSLayoutConstraints,
 /// you need to ensure that one of these Horizontal Contraints is not constraint of "equatTo".  If you are to pin the left/right edges
 /// to its parent this object will stretch to the parent's width.
-@objcMembers
 @objc(VDSTextLink)
 open class TextLink: ButtonBase {
     //--------------------------------------------------

VDS/Components/Buttons/TextLinkCaret/TextLinkCaret.swift

@@ -16,7 +16,6 @@ import Combine
 /// If you are using AutoLayoutConstraints you have a combination of Leading/Left and Trailing/Right NSLayoutConstraints,
 /// you need to ensure that one of these Horizontal Contraints is not constraint of "equatTo".  If you are to pin the left/right edges
 /// to its parent this object will stretch to the parent's width.
-@objcMembers
 @objc(VDSTextLinkCaret)
 open class TextLinkCaret: ButtonBase {
     //--------------------------------------------------

VDS/Components/Calendar/Calendar.swift

@@ -11,7 +11,6 @@ import VDSCoreTokens
 import Combine
 
 /// A calendar is a monthly view that lets customers select a single date.
-@objcMembers
 @objc(VDSCalendar)
 open class CalendarBase: Control, Changeable {
     

VDS/Components/Carousel/Carousel.swift

@@ -12,7 +12,6 @@ import Combine
 
 /// A carousel is a collection of related content in a row that a customer can navigate through horizontally.
 /// Use this component to show content that is supplementary, not essential for task completion.
-@objcMembers
 @objc(VDSCarousel)
 open class Carousel: View {
     

VDS/Components/CarouselScrollbar/CarouselScrollbar.swift

@@ -12,7 +12,6 @@ import Combine
 
 /// A carousel scrollbar is a control that allows to navigate between items in a carousel.
 /// It's also a status indicator that conveys the relative amount of content in a carousel and a location within it.
-@objcMembers
 @objc(VDSCarouselScrollbar)
 open class CarouselScrollbar: View {
     

VDS/Components/Checkbox/Checkbox.swift

@@ -12,7 +12,6 @@ import VDSCoreTokens
 
 /// Checkboxes are a multi-select component through which a customer indicates a choice. This is also used within
 /// ``CheckboxItem`` and ``CheckboxGroup``
-@objcMembers
 @objc(VDSCheckbox)
 open class Checkbox: SelectorBase {
     

VDS/Components/Checkbox/CheckboxGroup.swift

@@ -12,7 +12,6 @@ import VDSCoreTokens
 /// When the choice has multiple options, use a checkbox group. For example, use a checkbox group when
 /// asking a customer which attributes they would like to filter their search by. This uses ``CheckboxItem``
 /// to allow user selection.
-@objcMembers
 @objc(VDSCheckboxGroup)
 open class CheckboxGroup: SelectorGroupBase<CheckboxItem>, SelectorGroupMultiSelect {
     

VDS/Components/Checkbox/CheckboxItem.swift

@@ -9,7 +9,6 @@ import Foundation
 import UIKit
 
 /// Checkboxes are a multi-select component through which a customer indicates a choice. If a binary choice, the component is a checkbox. If the choice has multiple options, the component is a ``CheckboxGroup``.
-@objcMembers
 @objc(VDSCheckboxItem)
 open class CheckboxItem: SelectorItemBase<Checkbox> {
     

VDS/Components/DatePicker/DatePicker.swift

@@ -4,7 +4,6 @@ import VDSCoreTokens
 import Combine
 
 /// A dropdown select is an expandable menu of predefined options that allows a customer to make a single selection.
-@objcMembers
 @objc(VDSDatePicker)
 open class DatePicker: EntryFieldBase<String> {
     //--------------------------------------------------

VDS/Components/DropdownSelect/DropdownSelect.swift

@@ -11,7 +11,6 @@ import VDSCoreTokens
 import Combine
 
 /// A dropdown select is an expandable menu of predefined options that allows a customer to make a single selection.
-@objcMembers
 @objc(VDSDropdownSelect)
 open class DropdownSelect: EntryFieldBase<String> {
     //--------------------------------------------------

VDS/Components/Footnote/FootnoteGroup.swift

@@ -10,7 +10,6 @@ import UIKit
 import VDSCoreTokens
 
 /// This must always be paired with one or more ``Footnote`` in  a FootnoteGroup.
-@objcMembers
 @objc(VDSFootnoteGroup)
 open class FootnoteGroup: View {
     
@@ -112,6 +111,12 @@ open class FootnoteGroup: View {
         footnoteItems = []
     }
     
+    /// Used to make changes to the View based off a change events or from local properties.
+    open override func updateView() {
+        super.updateView()
+        updateFootnoteItems()
+    }
+       
     internal func updateFootnoteItems() {
         // symbol containers are as wide as the widest symbol container in the group.
         var symbolMaxWidth = 0.0

VDS/Components/Footnote/FootnoteItem.swift

@@ -11,7 +11,6 @@ import VDSCoreTokens
 
 /// A footnote is text that provides supporting details, legal copy and links to related content.
 /// It exists at the bottom or "foot" of a page or section.
-@objcMembers
 @objc(VDSFootnoteItem)
 open class FootnoteItem: View {
     
@@ -207,7 +206,7 @@ open class FootnoteItem: View {
         
         // Update symbolLabel
         symbolLabel.text = symbolType
-        symbolLabel.isHidden = hideSymbol
+        symbolLabel.isHidden = symbolType.isEmpty ? true : hideSymbol
         symbolLabel.textColor = kind.colorConfiguration.getColor(self)
         symbolLabel.textStyle = size.textStyle.regular
         symbolLabel.surface = surface

VDS/Components/Icon/Icon.swift

@@ -13,7 +13,6 @@ import Combine
 /// An icon is a graphical element that conveys information at a glance. It helps orient
 /// a customer, explain functionality and draw attention to interactive elements. Icons
 /// should have a functional purpose and should never be used for decoration.
-@objcMembers
 @objc(VDSIcon)
 open class Icon: View {
     

VDS/Components/InputStepper/InputStepper.swift

@@ -11,7 +11,6 @@ import VDSCoreTokens
 import Combine
 
 /// A stepper is a two-segment control that people use to increase or decrease an incremental value.'
-@objcMembers
 @objc(VDSInputStepper)
 open class InputStepper: EntryFieldBase<Int> {
     

VDS/Components/Label/Attributes/LabelAttributeModel.swift

@@ -39,6 +39,27 @@ public extension String {
     func isValid(range: NSRange) -> Bool {
         range.location >= 0 && range.length > 0 && range.location + range.length <= count
     }
+    
+    func index(from: Int) -> Index {
+        return self.index(startIndex, offsetBy: from)
+    }
+
+    func substring(from: Int) -> String {
+        let fromIndex = index(from: from)
+        return String(self[fromIndex...])
+    }
+
+    func substring(to: Int) -> String {
+        let toIndex = index(from: to)
+        return String(self[..<toIndex])
+    }
+
+    func substring(with r: Range<Int>) -> String {
+        let startIndex = index(from: r.lowerBound)
+        let endIndex = index(from: r.upperBound)
+        return String(self[startIndex..<endIndex])
+    }
+    
 }
 
 public extension NSAttributedString {

VDS/Components/Label/Label.swift

@@ -12,7 +12,6 @@ import Combine
 
 /// Label is a standard view used to draw text with applying Typography through ``TextStyle`` as well
 /// as other attributes using any implemetation of ``LabelAttributeModel``.
-@objcMembers
 @objc(VDSLabel)
 open class Label: UILabel, ViewProtocol, UserInfoable {
     

VDS/Components/Line/Line.swift

@@ -10,7 +10,6 @@ import UIKit
 import VDSCoreTokens
 
 /// A line visually separates content sections or elements in lists, tables and layouts to indicate content hierarchy.
-@objcMembers
 @objc(VDSLine)
 open class Line: View {
     

VDS/Components/ListUnordered/ListUnordered.swift

@@ -0,0 +1,239 @@
+//
+//  ListUnordered.swift
+//  VDS
+//
+//  Created by Vasavi Kanamarlapudi on 16/10/24.
+//
+
+import Foundation
+import UIKit
+import VDSCoreTokens
+
+/// List unordered breaks up related content into distinct phrases or sentences, which improves scannability.
+/// This component should be used when the text items don’t need to be in numeric order.
+@objcMembers
+@objc(VDSListUnordered)
+open class ListUnordered: View {
+    
+    //--------------------------------------------------
+    // MARK: - Initializers
+    //--------------------------------------------------
+    required public init() {
+        super.init(frame: .zero)
+    }
+    
+    public override init(frame: CGRect) {
+        super.init(frame: .zero)
+    }
+    
+    public required init?(coder: NSCoder) {
+        super.init(coder: coder)
+    }
+    
+    //--------------------------------------------------
+    // MARK: - Enums
+    //--------------------------------------------------
+    /// Enum that represents the size availble for the component.
+    public enum Size: String, DefaultValuing, CaseIterable {
+        case large
+        case medium
+        case small
+        case micro
+        
+        public static var defaultValue: Self { .large }
+        
+        /// TextStyle relative to Size.
+        public var textStyle: TextStyle.StandardStyle {
+            switch self {
+            case .large:
+                return .bodyLarge
+            case .medium:
+                return .bodyMedium
+            case .small:
+                return .bodySmall
+            case .micro:
+                return .micro
+            }
+        }
+    }
+    
+    /// Enum that represents the type of spacing available for the component.
+    public enum Spacing: String, CaseIterable {
+        case standard, compact
+    }
+    
+    //--------------------------------------------------
+    // MARK: - Public Properties
+    //--------------------------------------------------
+    /// Size of the component. The default size is Large.
+    open var size: Size = .defaultValue { didSet { setNeedsUpdate() } }
+    
+    /// Spacing type of the component.
+    open var spacing: Spacing = .standard { didSet { setNeedsUpdate() } }
+    
+    /// Lead-in text that shows as the top text for the component. This is optional.
+    open var leadInText: String? = nil { didSet { setNeedsUpdate() } }
+    
+    /// Array of unordered list items to show for the component.
+    open var unorderedList: [ListUnorderedItemModel] = [] { didSet { setNeedsUpdate() }}
+    
+    //--------------------------------------------------
+    // MARK: - Configuration Properties
+    //--------------------------------------------------
+    // It can be used for Glyph level 1.
+    private var disc = "•"
+    
+    // It can be used for Glyph Level 2.
+    private var endash = "–"
+    
+    // Spacing between the list items.
+    private var spaceBetweenItems: CGFloat {
+        switch (size, spacing) {
+        case (.large, .standard):
+            return VDSLayout.space4X
+        case (.medium, .standard), (.small, .standard), (.micro, .standard):
+            return VDSLayout.space3X
+        case (.large, .compact):
+            return VDSLayout.space2X
+        case (.medium, .compact), (.small, .compact), (.micro, .compact):
+            return VDSLayout.space1X
+        }
+    }
+    
+    // Padding that can be used in an item between the glyph and the item text.
+    private var padding: CGFloat {
+        switch (size, spacing) {
+        case (.large, .standard), (.large, .compact):
+            return VDSLayout.space3X
+        case (.medium, .standard), (.small, .standard), (.micro, .standard), (.medium, .compact), (.small, .compact), (.micro, .compact):
+            return VDSLayout.space2X
+        }
+    }
+    
+    private let textColorConfiguration = SurfaceColorConfiguration(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+    
+    //--------------------------------------------------
+    // MARK: - Private Properties
+    //--------------------------------------------------
+    private lazy var listStackView = UIStackView().with {
+        $0.translatesAutoresizingMaskIntoConstraints = false
+        $0.axis = .vertical
+        $0.distribution = .fill
+        $0.spacing = spaceBetweenItems
+        $0.backgroundColor = .clear
+    }
+    
+    //--------------------------------------------------
+    // MARK: - Overrides
+    //--------------------------------------------------
+    /// Called once when a view is initialized and is used to Setup additional UI or other constants and config.texturations.
+    open override func setup() {
+        super.setup()
+        
+        // add stackview
+        addSubview(listStackView)
+        listStackView.heightGreaterThanEqualTo(constant:0)
+        listStackView.pinToSuperView()
+    }
+    
+    open override func setDefaults() {
+        super.setDefaults()
+        leadInText = nil
+        unorderedList = []
+    }
+    
+    /// Resets to default settings.
+    open override func reset() {
+        super.reset()
+    }
+    
+    /// Used to make changes to the View based off a change events or from local properties.
+    open override func updateView() {
+        super.updateView()
+        listStackView.removeArrangedSubviews()
+        listStackView.subviews.forEach { $0.removeFromSuperview() }
+        listStackView.spacing = spaceBetweenItems
+        
+        if leadInText != nil {
+            let listItem = getListItem(with:self.leadInText, surface: surface)
+            listStackView.addArrangedSubview(listItem)
+        }
+        
+        unorderedList.forEach { item in
+            let listItem = getListItem(levelOneText: item.levelOneText, surface: surface)
+            listStackView.addArrangedSubview(listItem)
+            
+            item.levelTwoText?.forEach { text in
+                let listItem = getListItem(levelTwoText: text, surface: surface)
+                listStackView.addArrangedSubview(listItem)
+            }
+        }
+    }
+    
+    //--------------------------------------------------
+    // MARK: - Private Methods
+    //--------------------------------------------------
+    // Get Label with the required text and text formats.
+    func getLabel(with text: String?, surface: Surface) -> Label {
+        let textLabel = Label().with {
+            $0.isAccessibilityElement = true
+            $0.lineBreakMode = .byWordWrapping
+            $0.text = text
+            $0.textStyle = size.textStyle.regular
+            $0.textColor = textColorConfiguration.getColor(surface)
+            $0.surface = surface
+        }
+        return textLabel
+    }
+    
+    // Get the list item with the required text (LeadInText, Level 1 Text, Level 2 Text).
+    func getListItem(with leadInText:String? = nil, levelOneText: String? = nil, levelTwoText: String? = nil, surface:Surface) -> UIView {
+        let itemStackView = UIStackView().with {
+            $0.translatesAutoresizingMaskIntoConstraints = false
+            $0.axis = .horizontal
+            $0.alignment = .leading
+            $0.distribution = .fill
+            $0.spacing = padding
+            $0.backgroundColor = .clear
+        }
+        
+        // StackView with LeadIntext if provided.
+        if leadInText != nil {
+            let leadTextLabel = getLabel(with: leadInText, surface: surface)
+            itemStackView.addArrangedSubview(leadTextLabel)
+        }
+        
+        // StackView with Level 1 Text if provided.
+        if levelOneText != nil {
+            
+            // Add level 1 glyph: 'disc, bold'
+            let discLabel = getLabel(with: disc, surface: surface)
+            discLabel.widthAnchor.constraint(equalToConstant: discLabel.intrinsicContentSize.width).activate()
+            itemStackView.addArrangedSubview(discLabel)
+            
+            // Add level 1 Text
+            let levelOneLabel = getLabel(with: levelOneText, surface: surface)
+            itemStackView.addArrangedSubview(levelOneLabel)
+        }
+        
+        // StackView with Level 2 Text if provided.
+        if levelTwoText != nil {
+            
+            // Set level 2 leading space as needed for alignment.
+            let discSpaceView = View()
+            let discLabel = getLabel(with: disc, surface: surface)
+            discSpaceView.widthAnchor.constraint(equalToConstant: discLabel.intrinsicContentSize.width).activate()
+            itemStackView.addArrangedSubview(discSpaceView)
+            
+            // Add level 2 glyph: 'en dash, regular'
+            let endashLabel = getLabel(with: endash, surface: surface)
+            endashLabel.widthAnchor.constraint(equalToConstant: endashLabel.intrinsicContentSize.width).activate()
+            itemStackView.addArrangedSubview(endashLabel)
+            
+            // Add level 2 Text
+            let levelTwoLabel = getLabel(with: levelTwoText, surface: surface)
+            itemStackView.addArrangedSubview(levelTwoLabel)
+        }
+        return itemStackView
+    }
+}

VDS/Components/ListUnordered/ListUnordered.txt

@@ -0,0 +1,41 @@
+MM/DD/YYYY
+----------------
+- Initial Brand 3.0 handoff
+
+05/2/2022
+----------------
+- Added Body Medium to size configuration
+
+05/5/2022
+----------------
+- Added Spacing configuration (Standard, Compact) Web handoff
+
+08/2/2022
+----------------
+- Included a VDS Note about the Spacing prop naming rationale
+
+08/10/2022
+----------------
+- Updated default and inverted prop to  light and dark surface.
+
+12/13/2022
+----------------
+- Replaced focus border pixel and style & spacing values with tokens.
+
+01/10/2023
+----------------
+- Removed from Anatomy section: “List item text”
+- Updated “Glyph level 1” to “List Item Level 1”
+- Updated “Glyph level 2” to “List Item Level 2”
+- Updated image markers to reflect changes
+
+02/02/2023
+----------------
+- Reduced left padding for all Level 2 sizes so that the Glyph aligns with the text in Level 1.
+- Added dashed line on all sizes to indicate Level 2 alignment under Level 1.
+- Changed “endash” to “endash, regular” under Size section.
+- Updated all Level 1 and Level 2 glyph widths to “Hug”
+
+12/26/23
+----------------
+- Deleted Decisions log

VDS/Components/ListUnordered/ListUnorderedItemModel.swift

@@ -0,0 +1,23 @@
+//
+//  ListUnorderedItemModel.swift
+//  VDS
+//
+//  Created by Vasavi Kanamarlapudi on 16/10/24.
+//
+
+import Foundation
+extension ListUnordered {
+    public struct ListUnorderedItemModel: Equatable {
+        
+        /// Item Level 1 that shows text with glyph - disc, bold.
+        public var levelOneText: String
+        
+        /// Item Level 2 that shows text (one or many) with glyph - en dash. This is optional.
+        public var levelTwoText: [String?]?
+        
+        public init(itemLevelOneText: String, itemLevelTwoTexts: [String?]? = nil) {
+            self.levelOneText = itemLevelOneText
+            self.levelTwoText = itemLevelTwoTexts
+        }
+    }
+}

VDS/Components/Loader/Loader.swift

@@ -11,7 +11,6 @@ import VDSCoreTokens
 
 
 /// A loader is an indicator that uses animation to show customers that there is an indefinite amount of wait time while a task is ongoing, e.g. a page is loading, a form is being submitted. The component disappears when the task is complete.
-@objcMembers
 @objc(VDSLoader)
 open class Loader: View {
     

VDS/Components/Loader/LoaderViewController.swift

@@ -10,7 +10,6 @@ import UIKit
 import VDSCoreTokens
 
 /// ViewController to show the Loader, this will be presented using the LoaderLaunchable Protocl.
-@objcMembers
 @objc(VDSLoaderViewController)
 open class LoaderViewController: UIViewController, Surfaceable {
     //--------------------------------------------------

VDS/Components/Modal/Modal.swift

@@ -0,0 +1,149 @@
+//
+//  Modal.swift
+//  VDS
+//
+//  Created by Kanamarlapudi, Vasavi on 05/09/24.
+//
+
+import Foundation
+import UIKit
+import VDSCoreTokens
+import Combine
+
+/// A Modal is an overlay that interrupts the user flow to force the customer to provide information or a response.
+/// After the customer interacts with the modal, they can return to the parent content.
+@objc(VDSModal)
+open class Modal: Control, ModalLaunchable {
+    
+    //--------------------------------------------------
+    // MARK: - Initializers
+    //--------------------------------------------------
+    required public init() {
+        super.init(frame: .zero)
+    }
+    
+    public override init(frame: CGRect) {
+        super.init(frame: .zero)
+    }
+    
+    public required init?(coder: NSCoder) {
+        super.init(coder: coder)
+    }
+
+    //--------------------------------------------------
+    // MARK: - Private Properties
+    //--------------------------------------------------
+    internal var showModalButton = Button().with {
+        $0.use = .primary
+        $0.text = "Show Modal"
+    }
+    
+    //--------------------------------------------------
+    // MARK: - Public Properties
+    //--------------------------------------------------
+    /// Text rendered for the title of the modal
+    open var title: String? { didSet { setNeedsUpdate() } }
+    
+    /// Text rendered for the content of the modal
+    open var content: String? { didSet { setNeedsUpdate() } }
+    
+    /// UIView rendered for the content area of the modal
+    open var contentView: UIView? { didSet { setNeedsUpdate() } }
+    
+    /// Array of Buttonable Views that are shown as Modal Footer. Primary and Close button data for modal button group.
+    open var buttonData: [ButtonBase]? { didSet { setNeedsUpdate() } }
+
+    /// If provided, the Modal has the option to be displayed at full screen.
+    open var fullScreenDialog: Bool = false { didSet { setNeedsUpdate() } }
+
+    /// If provided, close button can not be present.
+    open var hideCloseButton: Bool = false { didSet { setNeedsUpdate() } }
+
+    //--------------------------------------------------
+    // MARK: - Overrides
+    //--------------------------------------------------
+    /// Called once when a view is initialized and is used to Setup additional UI or other constants and configurations.
+    open override func setup() {
+        super.setup()
+        
+        addSubview(showModalButton)
+        showModalButton.pinToSuperView()
+        backgroundColor = .clear
+        
+        isAccessibilityElement = true
+        accessibilityTraits = .button
+    }
+    
+    open override func setDefaults() {
+        super.setDefaults()
+        title = nil
+        content = nil
+        contentView = nil
+        buttonData = nil
+        fullScreenDialog = false
+        hideCloseButton = false
+        
+        showModalButton.onClick = { _ in  self.showModalButtonClick() }
+        
+        bridge_accessibilityLabelBlock = { [weak self] in
+            guard let self else { return "" }
+            var label = title
+            if label == nil {
+                label = content
+            }
+            if let label, !label.isEmpty {
+                return label
+            } else {
+                return "Modal"
+            }
+        }
+        
+        bridge_accessibilityHintBlock = { [weak self] in
+            guard let self else { return "" }
+            return isEnabled ? "Double tap to open." : ""
+        }
+    }
+    
+    internal func showModalButtonClick() {
+        self.presentModal(surface: self.surface,
+                          modalModel: .init(closeButtonText: showModalButton.text ?? "",
+                                            title: title,
+                                            content: content,
+                                            contentView: contentView,
+                                            buttonData: buttonData,
+                                            fullScreenDialog: fullScreenDialog,
+                                            hideCloseButton: hideCloseButton),
+                          presenter: self)
+    }
+    
+    
+    /// Used to make changes to the View based off a change events or from local properties.
+    open override func updateView() {
+        super.updateView()
+        showModalButton.surface = surface
+    }
+    
+    public static func accessibleText(for title: String?, content: String?, closeButtonText: String) -> String {
+        var label = ""
+        if let title {
+            label = title
+        }
+        if let content {
+            if !label.isEmpty {
+                label += ","
+            }
+            label += content
+        }
+        return label
+    }
+}
+
+
+// MARK: AppleGuidelinesTouchable
+extension Modal: AppleGuidelinesTouchable {
+    /// Overrides to ensure that the touch point meets a minimum of the minimumTappableArea.
+    override open func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
+        Self.acceptablyOutsideBounds(point: point, bounds: bounds)
+    }
+    
+}

VDS/Components/Modal/ModalChangeLog.txt

@@ -0,0 +1,67 @@
+MM/DD/YYYY
+----------------
+- Initial Brand 3.0 handoff
+
+12/17/2021
+----------------
+- Replaced focusring colors (previously interactive/onlight/ondark) with accessibility/onlight/ondark colors
+- Updated focus border name (previously interactive.focusring.onlight) with focusring.onlight/ondark
+
+12/31/2021
+----------------
+- Updated Hover and Active state trigger specs. If triggered by mouse, Active same as Hover. If not, Active same as Default.
+
+03/01/2022
+----------------
+- Replaced Close Non-Scaling icon with VDS Icon.
+- Removed “vector effect” from Anatomy.
+- Removed “weight” from Configurations.
+
+08/10/2022
+----------------
+- Updated default and inverted prop to  light and dark surface.
+- Noted that button is optional within anatomy
+
+09/06/2022
+----------------
+- Updated Anatomy element names to remove the word “Modal” from text elements, updated Button to be Button Group,
+and noted Button Group as optional across all visuals within Anatomy.
+
+11/30/2022
+----------------
+- Added "(web only)" to any instance of "keyboard focus"
+
+12/13/2022
+----------------
+- Replaced focus border pixel and style & spacing values with tokens.
+
+04/24/2023
+----------------
+- Updated all instances of Close Button (VDS Icon) with VDS Button Icon (size small)
+- Button Icon placed 8px from top/right edge
+- Use the Ghost variant of Button Icon
+- Added Button Icon props to Elements spec
+
+10/17/2023
+----------------
+- Added component tokens table
+- Applied component tokens to light, dark surface configurations
+
+11/22/2023
+----------------
+- Updated tab/desk visuals to reflect new corner radius value - 12px
+- Updated border radius value in Anatomy
+
+11/27/2023
+----------------
+- Updated ‘border radius” to “corner radius” in Anatomy
+
+12/1/2023
+----------------
+- Applied palette tokens instead of hardcoded values where component tokens included an opacity
+- Removed layer opacity annotation for instances where opacity is built into a component token
+
+07/18/2024
+----------------
+- Added Scrollbar hit area with z-index specifications to the Behaviors page
+- Decreased the height of the Grab zone to equal the height of the scrollbar thumb on the Behaviors page

VDS/Components/Modal/ModalDialog.swift

@@ -0,0 +1,237 @@
+//
+//  ModalDialog.swift
+//  VDS
+//
+//  Created by Kanamarlapudi, Vasavi on 09/09/24.
+//
+
+import Foundation
+import UIKit
+import VDSCoreTokens
+
+@objc(VDSModalDialog)
+open class ModalDialog: View, UIScrollViewDelegate, ParentViewProtocol {
+    
+    //--------------------------------------------------
+    // MARK: - Initializers
+    //--------------------------------------------------
+    required public init() {
+        super.init(frame: .zero)
+    }
+    
+    public override init(frame: CGRect) {
+        super.init(frame: .zero)
+    }
+    
+    public required init?(coder: NSCoder) {
+        super.init(coder: coder)
+    }
+
+    //--------------------------------------------------
+    // MARK: - Public Properties
+    //--------------------------------------------------
+    open var children: [any ViewProtocol] { [closeCrossButton, titleLabel, contentLabel, buttonGroupData] }
+
+    open var modalModel = Modal.ModalModel() { didSet { setNeedsUpdate() } }
+
+    open var titleLabel = Label().with { label in
+        label.isAccessibilityElement = true
+        label.textStyle = .boldTitleLarge
+    }
+    
+    open var contentLabel = Label().with { label in
+        label.isAccessibilityElement = true
+        label.textStyle = .bodyLarge
+    }
+        
+    open lazy var closeCrossButton = ButtonIcon().with {
+        $0.kind = .ghost
+        $0.surfaceType = .colorFill
+        $0.iconName = .close
+        $0.size = .small
+        $0.customContainerSize = UIDevice.isIPad ? 48 : 48
+        $0.customIconSize = UIDevice.isIPad ? 32 : 32
+    }
+ 
+    open var buttonGroupData = ButtonGroup().with {
+        $0.alignment = .left
+    }
+    
+    //--------------------------------------------------
+    // MARK: - Private Properties
+    //--------------------------------------------------
+    private var scrollView = UIScrollView().with {
+        $0.translatesAutoresizingMaskIntoConstraints = false
+        $0.backgroundColor = .clear
+    }
+
+    private var contentStackView = UIStackView().with {
+        $0.translatesAutoresizingMaskIntoConstraints = false
+        $0.axis = .vertical
+        $0.alignment = .leading
+        $0.distribution = .fillProportionally
+        $0.spacing = 0
+    }
+            
+    lazy var primaryAccessibilityElement = UIAccessibilityElement(accessibilityContainer: self).with {
+        $0.accessibilityLabel = "Modal"
+    }
+   
+    // close button with the 48 x 48 px
+    private var closeCrossButtonSize = 48.0
+    
+    private let containerViewInset = UIDevice.isIPad ? VDSLayout.space12X : VDSLayout.space4X
+    private let contentLabelTopSpace = UIDevice.isIPad ? VDSLayout.space8X : VDSLayout.space6X
+    private let contentLabelBottomSpace = UIDevice.isIPad ? VDSLayout.space8X : VDSLayout.space12X
+    private let gapBetweenButtonItems = VDSLayout.space3X
+
+    //--------------------------------------------------
+    // MARK: - Configuration Properties
+    //--------------------------------------------------
+    private let backgroundColorConfiguration = SurfaceColorConfiguration(VDSColor.backgroundPrimaryLight, VDSColor.backgroundPrimaryDark)
+    private let textColorConfiguration = SurfaceColorConfiguration(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+
+    //--------------------------------------------------
+    // MARK: - Constraints
+    //--------------------------------------------------
+    private var contentStackViewBottomConstraint: NSLayoutConstraint?
+
+    //--------------------------------------------------
+    // MARK: - Overrides
+    //--------------------------------------------------
+    /// Called once when a view is initialized and is used to Setup additional UI or other constants and configurations.
+    open override func setup() {
+        super.setup()
+        
+        titleLabel.accessibilityTraits = .header
+        layer.cornerRadius = 12
+        
+        // Add titleLabel, contentLabel to contentStack.
+        contentStackView.addArrangedSubview(titleLabel)
+        contentStackView.addArrangedSubview(contentLabel)
+        contentStackView.setCustomSpacing(contentLabelTopSpace, after: titleLabel)
+        scrollView.addSubview(contentStackView)
+        
+        // Add crossButon, scrollView, buttonsData.
+        addSubview(closeCrossButton)
+        addSubview(scrollView)
+        addSubview(buttonGroupData)
+        self.bringSubviewToFront(closeCrossButton)
+        
+        let crossTopSpace = UIDevice.isIPad && !modalModel.fullScreenDialog ? 0 : VDSLayout.space12X
+        let scrollTopSpace = UIDevice.isIPad && !modalModel.fullScreenDialog ? containerViewInset : (crossTopSpace + closeCrossButtonSize)
+        let contentTrailingSpace = UIDevice.isIPad ? (containerViewInset/2) - 6 : containerViewInset
+
+        // Activate constraints
+        NSLayoutConstraint.activate([
+            // Constraints for the closeCrossButton
+            closeCrossButton.topAnchor.constraint(equalTo: topAnchor, constant: crossTopSpace),
+            closeCrossButton.leadingAnchor.constraint(greaterThanOrEqualTo: leadingAnchor),
+            closeCrossButton.trailingAnchor.constraint(equalTo: trailingAnchor),
+            closeCrossButton.heightAnchor.constraint(equalToConstant: closeCrossButtonSize),
+
+            // Constraints for the bottom button view
+            buttonGroupData.leadingAnchor.constraint(equalTo: leadingAnchor, constant:containerViewInset),
+            buttonGroupData.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -containerViewInset),
+            buttonGroupData.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -containerViewInset),
+
+            // Constraints for the scrollView
+            scrollView.topAnchor.constraint(equalTo: topAnchor, constant: scrollTopSpace),
+            scrollView.leadingAnchor.constraint(equalTo: leadingAnchor, constant:containerViewInset),
+            scrollView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -contentTrailingSpace),
+            scrollView.bottomAnchor.constraint(equalTo: buttonGroupData.topAnchor, constant: -contentLabelBottomSpace),
+
+            // Constraints for the contentStackView
+            contentStackView.topAnchor.constraint(equalTo: scrollView.topAnchor),
+            contentStackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
+            contentStackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -contentTrailingSpace),
+            contentStackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor, constant: -contentTrailingSpace),
+            contentStackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor)
+        ])
+        
+        contentStackViewBottomConstraint = contentStackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor)
+        contentStackViewBottomConstraint?.activate()
+    }
+
+    /// Used to make changes to the View based off a change events or from local properties.
+    open override func updateView() {
+        super.updateView()
+
+        // Update surface and background
+        backgroundColor = backgroundColorConfiguration.getColor(self)
+        scrollView.indicatorStyle = surface == .light ? .black : .white
+        closeCrossButton.surface = surface
+        buttonGroupData.surface = surface
+        titleLabel.surface = surface
+        contentLabel.surface = surface
+
+        // Re-arrange contentStack
+        contentStackView.removeArrangedSubviews()
+
+        titleLabel.text = modalModel.title
+        contentLabel.text = modalModel.content
+        titleLabel.textColor = textColorConfiguration.getColor(self)
+        contentLabel.textColor = textColorConfiguration.getColor(self)
+        titleLabel.sizeToFit()
+        contentLabel.sizeToFit()
+        
+        // Add buttons data if provided
+        if let buttons = modalModel.buttonData, buttons.count > 0 {
+            buttonGroupData.buttons = buttons
+            let percent = UIDevice.isIPad ? 50.0 : 100.0
+            buttonGroupData.rowQuantityTablet = 2
+            buttonGroupData.rowQuantityPhone = 1
+            buttonGroupData.childWidth = .percentage(percent)
+        }
+        
+        // Update title, content and contentview
+        var addedTitle = false
+        
+        if let titleText = modalModel.title, !titleText.isEmpty {
+            contentStackView.addArrangedSubview(titleLabel)
+            addedTitle = true
+        }
+        
+        var addedContent = false
+        if let contentText = modalModel.content, !contentText.isEmpty {
+            contentStackView.addArrangedSubview(contentLabel)
+            addedContent = true
+        } else if let contentView = modalModel.contentView {
+            contentView.translatesAutoresizingMaskIntoConstraints = false
+            if var surfaceable = contentView as? Surfaceable {
+                surfaceable.surface = surface
+            }
+            contentStackView.addArrangedSubview(contentView)
+            addedContent = true
+        }
+        
+        if addedTitle && addedContent {
+            contentStackView.spacing = contentLabelTopSpace
+        }
+        
+        closeCrossButton.isHidden = modalModel.hideCloseButton
+
+        contentStackView.setNeedsLayout()
+        contentStackView.layoutIfNeeded()
+        scrollView.setNeedsLayout()
+        scrollView.layoutIfNeeded()
+    }
+            
+    /// Used to update any Accessibility properties.
+    open override func updateAccessibility() {
+        super.updateAccessibility()
+        primaryAccessibilityElement.accessibilityHint = "Double tap on the cross button to close."
+        primaryAccessibilityElement.accessibilityFrameInContainerSpace = .init(origin: .zero, size: frame.size)
+    }
+    
+    open override var accessibilityElements: [Any]? {
+        get {
+            var elements: [Any] = [primaryAccessibilityElement]
+            contentStackView.arrangedSubviews.forEach{ elements.append($0) }
+            elements.append(buttonGroupData)
+            return elements
+        }
+        set {}
+    }
+
+}

VDS/Components/Modal/ModalDialogViewController.swift

@@ -0,0 +1,123 @@
+//
+//  ModalDialogViewController.swift
+//  VDS
+//
+//  Created by Kanamarlapudi, Vasavi on 09/09/24.
+//
+
+import Foundation
+import UIKit
+import Combine
+import VDSCoreTokens
+
+@objc(VDSModalDialogViewController)
+open class ModalDialogViewController: UIViewController, Surfaceable  {
+    
+    /// Set of Subscribers for any Publishers for this Control.
+    open var subscribers = Set<AnyCancellable>()
+    
+    //--------------------------------------------------
+    // MARK: - Private Properties
+    //--------------------------------------------------
+    private var onClickSubscriber: AnyCancellable? {
+        willSet {
+            if let onClickSubscriber {
+                onClickSubscriber.cancel()
+            }
+        }
+    }
+        
+    private let modalDialog = ModalDialog()
+    
+    //--------------------------------------------------
+    // MARK: - Public Properties
+    //--------------------------------------------------
+    /// Current Surface and this is used to pass down to child objects that implement Surfacable
+    open var surface: Surface = .light { didSet { updateView() }}
+    open var modalModel = Modal.ModalModel() { didSet { updateView() }}
+    open var presenter: UIView? { didSet { updateView() }}
+    
+    //--------------------------------------------------
+    // MARK: - Configuration
+    //--------------------------------------------------
+    private let backgroundColorConfiguration = SurfaceColorConfiguration(VDSColor.paletteBlack, VDSColor.paletteWhite)
+    
+    //--------------------------------------------------
+    // MARK: - Lifecycle
+    //--------------------------------------------------
+    open override func viewDidLoad() {
+        super.viewDidLoad()
+        isModalInPresentation = true
+        setup()
+    }
+    open override func viewDidAppear(_ animated: Bool) {
+        super.viewDidAppear(animated)
+        UIAccessibility.post(notification: .screenChanged, argument: modalDialog)
+    }
+        
+    private func dismiss() {
+        dismiss(animated: true) { [weak self] in
+            guard let self, let presenter else { return }
+            UIAccessibility.post(notification: .layoutChanged, argument: presenter)
+        }
+    }
+    
+    open func setup() {
+        view.accessibilityElements = [modalDialog]
+        
+        //left-right swipe
+        view.publisher(for: UISwipeGestureRecognizer().with{ $0.direction = .right })
+            .sink { [weak self] swipe in
+                guard let self, !UIAccessibility.isVoiceOverRunning else { return }
+                self.dismiss()
+            }.store(in: &subscribers)
+        
+        //tapping in background
+        view.publisher(for: UITapGestureRecognizer().with{ $0.numberOfTapsRequired = 1 })
+            .sink { [weak self] swipe in
+                guard let self, !UIAccessibility.isVoiceOverRunning else { return }
+                self.dismiss()
+            }.store(in: &subscribers)
+        
+        //clicking button
+        onClickSubscriber = modalDialog.closeCrossButton.publisher(for: .touchUpInside)
+            .sink {[weak self] button in
+                guard let self else { return }
+                self.dismiss()
+            }
+        
+        view.addSubview(modalDialog)
+
+    }
+
+    /// Used to make changes to the View based off a change events or from local properties.
+    open func updateView() {
+        modalDialog.surface = surface
+        modalDialog.modalModel = modalModel
+        
+
+        // Activate constraints
+        modalDialog.removeConstraints()
+        let isFullScreen = UIDevice.isIPad && !modalModel.fullScreenDialog ? false : true
+        
+        if isFullScreen {
+            view.backgroundColor = modalDialog.backgroundColor
+            modalDialog
+                .pinLeading()
+                .pinTrailing()
+            modalDialog.pinTop(anchor: UIDevice.isIPad ? view.safeAreaLayoutGuide.topAnchor : view.topAnchor)
+            modalDialog.pinBottom(UIDevice.isIPad ? view.bottomAnchor : view.safeAreaLayoutGuide.bottomAnchor)
+            
+        } else {
+            view.backgroundColor = backgroundColorConfiguration.getColor(self).withAlphaComponent(0.8)
+            NSLayoutConstraint.activate([
+                // Constraints for the floating modal view for Tablet.
+                modalDialog.centerXAnchor.constraint(equalTo: view.centerXAnchor),
+                modalDialog.centerYAnchor.constraint(equalTo: view.centerYAnchor),
+                modalDialog.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.7),
+                modalDialog.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.7)
+            ])
+        }
+
+    }
+}

VDS/Components/Modal/ModalLaunchable.swift

@@ -0,0 +1,28 @@
+//
+//  ModalLaunchable.swift
+//  VDS
+//
+//  Created by Kanamarlapudi, Vasavi on 09/09/24.
+//
+
+import Foundation
+import UIKit
+
+public protocol ModalLaunchable {
+    func presentModal(surface: Surface, modalModel: Modal.ModalModel, presenter: UIView?)
+}
+
+extension ModalLaunchable {
+    public func presentModal(surface: Surface, modalModel: Modal.ModalModel, presenter: UIView? = nil) {
+        if let presenting = UIApplication.topViewController() {
+            let modalViewController = ModalDialogViewController(nibName: nil, bundle: nil).with {
+                $0.surface = surface
+                $0.modalModel = modalModel
+                $0.presenter = presenter
+                $0.modalPresentationStyle = UIDevice.isIPad && !modalModel.fullScreenDialog ? .overCurrentContext : .fullScreen
+                $0.modalTransitionStyle = .crossDissolve
+            }
+            presenting.present(modalViewController, animated: true)
+        }
+    }
+}

VDS/Components/Modal/ModalModel.swift

@@ -0,0 +1,45 @@
+//
+//  ModalModel.swift
+//  VDS
+//
+//  Created by Kanamarlapudi, Vasavi on 09/09/24.
+//
+
+import Foundation
+import UIKit
+
+extension Modal {
+    
+    /// Model used to represent the modal.
+    public struct ModalModel: Equatable {
+        /// Current Surface and this is used to pass down to child objects that implement Surfacable
+        public var closeButtonText: String
+        public var title: String?
+        public var content: String?
+        public var contentView: UIView?
+        public var accessibleText: String?
+        public var contentViewAlignment: UIStackView.Alignment?
+        public var buttonData: [ButtonBase]?
+        public var fullScreenDialog: Bool
+        public var hideCloseButton: Bool
+        public init(closeButtonText: String = "Close",
+                    title: String? = nil,
+                    content: String? = nil,
+                    contentView: UIView? = nil,
+                    buttonData: [ButtonBase]? = nil,
+                    fullScreenDialog: Bool = false,
+                    hideCloseButton: Bool = false,
+                    accessibleText: String? = "Modal",
+                    contentViewAlignment: UIStackView.Alignment = .leading) {
+            self.closeButtonText = closeButtonText
+            self.title = title
+            self.content = content
+            self.contentView = contentView
+            self.accessibleText = accessibleText
+            self.contentViewAlignment = contentViewAlignment
+            self.buttonData = buttonData
+            self.fullScreenDialog = fullScreenDialog
+            self.hideCloseButton = hideCloseButton
+        }
+    }
+}

VDS/Components/Notification/Notification.swift

@@ -14,7 +14,6 @@ import Combine
 /// in context. There are four types: information, success, warning and error; each
 /// with different color and content. They may be screen-specific, flow-specific or
 /// experience-wide.
-@objcMembers
 @objc(VDSNotification)
 open class Notification: View, ParentViewProtocol {
         

VDS/Components/Pagination/Pagination.swift

@@ -11,7 +11,6 @@ import VDSCoreTokens
 import Combine
 
 ///Pagination is a control that enables customers to navigate multiple pages of content by selecting either a specific page or the next or previous set of four pages.
-@objcMembers
 @objc(VDSPagination)
 open class Pagination: View {
     

VDS/Components/Pagination/PaginationButton.swift

@@ -9,7 +9,6 @@ import UIKit
 import VDSCoreTokens
 
 ///This is customised button for Pagination view
-@objcMembers
 @objc(PaginationButton)
 open class PaginationButton: ButtonBase {
     //--------------------------------------------------

VDS/Components/PriceLockup/PriceLockup.swift

@@ -9,7 +9,6 @@ import Foundation
 import UIKit
 import VDSCoreTokens
 
-@objcMembers
 @objc(VDSPriceLockup)
 open class PriceLockup: View, ParentViewProtocol {
     
@@ -140,6 +139,7 @@ open class PriceLockup: View, ParentViewProtocol {
     internal var delimiterIndex = 0
     internal var strikethroughLocation = 0
     internal var strikethroughLength = 0
+    internal var strikethroughAccessibilityText: String = "price not offering anymore"
     
     internal var textPosition:TextPosition = .preDelimiter
     enum TextPosition: String, CaseIterable {
@@ -217,6 +217,24 @@ open class PriceLockup: View, ParentViewProtocol {
     
     open override func setDefaults() {
         super.setDefaults()
+        
+        priceLockupLabel.bridge_accessibilityLabelBlock = { [weak self] in
+            guard let self else { return "" }
+            var accessibilityLabels = [String]()
+            if let text = priceLockupLabel.text, !text.isEmpty {
+                if strikethrough, strikethroughLength > 0 {
+                    let preText = text.substring(to: strikethroughLocation)
+                    let postText = text.substring(from: strikethroughLocation)
+                    accessibilityLabels.append(preText)
+                    accessibilityLabels.append(strikethroughAccessibilityText)
+                    accessibilityLabels.append(postText)
+                } else {
+                    accessibilityLabels.append(text)
+                }
+            }
+            return accessibilityLabels.joined(separator: " ")
+        }
+        
         bold = false
         hideCurrency = false
         leadingText = nil

VDS/Components/RadioBox/RadioBoxGroup.swift

@@ -11,7 +11,6 @@ import UIKit
 /// Radio boxes are single-select components through which a customer indicates a choice.
 /// They're stylized ``RadioButtons`` that must always be paired with one or more ``RadioBoxItem``
 /// in a radio box group. Use radio boxes to display choices like device storage.
-@objcMembers
 @objc(VDSRadioBoxGroup)
 open class RadioBoxGroup: SelectorGroupBase<RadioBoxItem>, SelectorGroupSingleSelect {
     

VDS/Components/RadioBox/RadioBoxItem.swift

@@ -12,7 +12,6 @@ import VDSCoreTokens
 
 /// Radio boxes are single-select components through which a customer indicates a choice
 /// that are used within a ``RadioBoxGroup``.
-@objcMembers
 @objc(VDSRadioBoxItem)
 open class RadioBoxItem: Control, Changeable, FormFieldable, Groupable, ParentViewProtocol {
     

VDS/Components/RadioButton/RadioButton.swift

@@ -13,7 +13,6 @@ import VDSCoreTokens
 /// Radio buttons are single-select components through which a customer indicates a choice.
 /// They must always be paired with one or more ``RadioButtonItem`` within a ``RadioButtonGroup``.
 /// Use radio buttons to display choices like delivery method.
-@objcMembers
 @objc(VDSRadioButton)
 open class RadioButton: SelectorBase {
     

VDS/Components/RadioButton/RadioButtonGroup.swift

@@ -11,7 +11,6 @@ import UIKit
 /// Radio buttons items are single-select components through which a customer indicates a choice.
 /// They must always be paired with one or more other ``RadioButtonItem`` within  a radio button group.
 /// Use radio buttons to display choices like delivery method.
-@objcMembers
 @objc(VDSRadioButtonGroup)
 open class RadioButtonGroup: SelectorGroupBase<RadioButtonItem>, SelectorGroupSingleSelect {
     

VDS/Components/RadioButton/RadioButtonItem.swift

@@ -11,7 +11,6 @@ import UIKit
 /// Radio buttons items are single-select components through which a customer indicates a choice.
 /// They must always be paired with one or more other radio button items within a ``RadioButtonGroup``.
 /// Use radio buttons to display choices like delivery method.
-@objcMembers
 @objc(VDSRadioButtonItem)
 open class RadioButtonItem: SelectorItemBase<RadioButton> {
     

VDS/Components/Table/Table.swift

@@ -10,7 +10,6 @@ import UIKit
 import VDSCoreTokens
 
 ///Table is view composed of rows and columns, which takes any view into each cell and resizes based on the highest cell height.
-@objcMembers
 @objc(VDSTable)
 open class Table: View {
     
@@ -27,7 +26,6 @@ open class Table: View {
         $0.allowsSelection = false
         $0.showsVerticalScrollIndicator = false
         $0.showsHorizontalScrollIndicator = false
-        $0.isAccessibilityElement = true
         $0.backgroundColor = .clear
     }
     
@@ -148,6 +146,7 @@ extension Table: UICollectionViewDelegate, UICollectionViewDataSource, TableColl
         var edgePadding = UIEdgeInsets(top: padding.verticalValue(), left: 0, bottom: padding.verticalValue(), right: padding.horizontalValue())
         edgePadding.left = (indexPath.row == 0 && !striped) ? VDSLayout.space1X : padding.horizontalValue()
         cell.updateCell(content: currentItem, surface: surface, striped: shouldStrip, padding: edgePadding, isHeader: isHeader)
+        setAccessibilityForCell(cell: cell, content: currentItem, path: indexPath)
         return cell
     }
     
@@ -162,4 +161,38 @@ extension Table: UICollectionViewDelegate, UICollectionViewDataSource, TableColl
     func collectionView(_ collectionView: UICollectionView, widthForItemAt indexPath: IndexPath) -> CGFloat {
         return columnWidths?[indexPath.row] ?? 0.0
     }
+    
+    //--------------------------------------------------
+    // MARK: - Accessibility
+    //--------------------------------------------------
+    
+    /// To set the accessibility label for the each cell based on the criteria. Table name along with total no of column & row information should be passed in the first cell's accessibility label.
+    private func setAccessibilityForCell(cell: TableCellItem, content: TableItemModel, path: IndexPath) {
+        
+        var accLabel = content.component?.accessibilityLabel ?? "Empty"
+            
+        ///Set the type of header label
+        if path.section == 0 {
+            accLabel.append(", Column Header")
+        } else if path.row == 0 {
+            ///As per design team, inspite of column 0 may not look like a header, it should be read as header.
+            accLabel.append(", Row Header")
+        }
+
+        ///Set the Row/Column number for each cell
+        if path.row == 0 {
+            accLabel.append(", Row \(path.section + 1), Column \(path.row + 1)")
+        } else {
+            accLabel.append(", Column \(path.row + 1)")
+        }
+        
+        ///Set the Row header accessibilityLabel at the end of the non-header cells accessibilityLabel
+        if path.section != 0,
+           path.row != 0,
+           let columnHeaderAccLabel = tableHeader.first?.columns[path.row].component?.accessibilityLabel {
+            accLabel.append(", \(columnHeaderAccLabel)")
+        }
+        
+        cell.accessibilityLabel = accLabel
+    }
 }

VDS/Components/Table/TableCellItem.swift

@@ -45,6 +45,7 @@ final class TableCellItem: UICollectionViewCell {
     
     private func setupCell() {
         contentView.backgroundColor = .clear
+        isAccessibilityElement = true
         
         addSubview(containerView)
         containerView.pinToSuperView()

VDS/Components/Tabs/Tab.swift

@@ -11,7 +11,6 @@ import VDSCoreTokens
 import Combine
 
 extension Tabs {
-    @objcMembers
         @objc(VDSTab)
     open class Tab: Control, Groupable {
         

VDS/Components/Tabs/Tabs.swift

@@ -10,7 +10,6 @@ import UIKit
 import VDSCoreTokens
 
 /// Tabs are organizational components that group content and allow customers to navigate its display. Use them to separate content when the content is related but doesn’t need to be compared.
-@objcMembers
 @objc(VDSTabs)
 open class Tabs: View, ParentViewProtocol {
     

VDS/Components/Tabs/TabsContainer.swift

@@ -8,7 +8,6 @@
 import Foundation
 import UIKit
 
-@objcMembers
 @objc(VDSTabsContainer)
 open class TabsContainer: View {
     

VDS/Components/TextFields/InputField/InputField.swift

@@ -13,7 +13,6 @@ import Combine
 /// An input field is an input wherein a customer enters information. They typically appear in forms.
 /// Specialized input fields capture credit card numbers, inline actions, passwords, phone numbers,
 /// dates and security codes in their correct formats.
-@objcMembers
 @objc(VDSInputField)
 open class InputField: EntryFieldBase<String> {
     

VDS/Components/TextFields/InputField/TextField.swift

@@ -10,7 +10,6 @@ import UIKit
 import Combine
 import VDSCoreTokens
 
-@objcMembers
 @objc(VDSTextField)
 open class TextField: UITextField, ViewProtocol, Errorable {
         

VDS/Components/TextFields/TextArea/TextArea.swift

@@ -12,7 +12,6 @@ import Combine
 
 /// A text area is an input wherein a customer enters long-form information.
 /// Use a text area when you want customers to enter text that’s longer than a single line.
-@objcMembers
 @objc(VDSTextArea)
 open class TextArea: EntryFieldBase<String> {
     //--------------------------------------------------

VDS/Components/TextFields/TextArea/TextView.swift

@@ -10,7 +10,6 @@ import UIKit
 import Combine
 import VDSCoreTokens
 
-@objcMembers
 @objc(VDSTextView)
 open class TextView: UITextView, ViewProtocol, Errorable {
     

VDS/Components/TileContainer/TileContainer.swift

@@ -10,7 +10,6 @@ import VDSCoreTokens
 import UIKit
 import Combine
 
-@objcMembers
 @objc(VDSTileContainer)
 open class TileContainer: TileContainerBase<TileContainer.Padding> {
         
@@ -346,8 +345,15 @@ open class TileContainerBase<PaddingType: DefaultValuing & Valuing>: View where
             containerView.setAccessibilityLabel(for: views)
             
             //append all children that are accessible
+            if containerView.isAccessibilityElement {
+                elements.forEach({ element in
+                    if element.accessibilityTraits.contains(.button) || element.accessibilityTraits.contains(.link) {
+                        items.append(element)
+                    }
+                })
+            } else {
                 items.append(contentsOf: elements)
-            
+            }
             return items
         }
         set {}

VDS/Components/Tilelet/Tilelet.swift

@@ -15,7 +15,6 @@ import Combine
 /// support quick scanning and engagement. A Tilelet is fully clickable and
 /// while it can include an arrow CTA, it does not require one in order to
 /// function.
-@objcMembers
 @objc(VDSTilelet)
 open class Tilelet: TileContainerBase<Tilelet.Padding>, ParentViewProtocol {
     
@@ -104,7 +103,7 @@ open class Tilelet: TileContainerBase<Tilelet.Padding>, ParentViewProtocol {
     }
     
     private var backgroundColorSurface: Surface {
-        backgroundColorConfiguration.getColor(self).surface
+        backgroundColorConfiguration.getColor(self).isDark() ? .dark : .light
     }
     
     //--------------------------------------------------
@@ -280,6 +279,7 @@ open class Tilelet: TileContainerBase<Tilelet.Padding>, ParentViewProtocol {
     //--------------------------------------------------
     // MARK: - Constraints
     //--------------------------------------------------
+    internal var iconContainerHeightConstraint: NSLayoutConstraint?
     internal var titleLockupWidthConstraint: NSLayoutConstraint?
     internal var titleLockupTrailingConstraint: NSLayoutConstraint?
     internal var titleLockupTopConstraint: NSLayoutConstraint?
@@ -328,15 +328,15 @@ open class Tilelet: TileContainerBase<Tilelet.Padding>, ParentViewProtocol {
         
         iconContainerView.addSubview(descriptiveIcon)
         iconContainerView.addSubview(directionalIcon)
-        
+        iconContainerHeightConstraint = iconContainerView.height(constant: 0)
         descriptiveIcon
             .pinLeading()
-            .pinTop()
+            .pinTopGreaterThanOrEqualTo()
             .pinBottom()
         
         directionalIcon
             .pinTrailing()
-            .pinTop()
+            .pinTopGreaterThanOrEqualTo()
             .pinBottom()
         
         badge.bottomAnchor.constraint(equalTo: badge.label.bottomAnchor, constant: 2).activate()
@@ -468,6 +468,7 @@ open class Tilelet: TileContainerBase<Tilelet.Padding>, ParentViewProtocol {
     private func updateBadge() {
         if let badgeModel {
             badge.text = badgeModel.text
+            badge.textColor = badgeModel.textColor
             badge.fillColor = badgeModel.fillColor
             badge.numberOfLines = badgeModel.numberOfLines
             badge.surface = backgroundColorSurface
@@ -558,6 +559,7 @@ open class Tilelet: TileContainerBase<Tilelet.Padding>, ParentViewProtocol {
                 descriptiveIcon.color = color
             }
             descriptiveIcon.size = descriptiveIconModel.size
+            iconContainerHeightConstraint?.constant = descriptiveIcon.size.dimensions.height
             descriptiveIcon.surface = backgroundColorSurface
             showIconContainerView = true
         }
@@ -568,6 +570,7 @@ open class Tilelet: TileContainerBase<Tilelet.Padding>, ParentViewProtocol {
                 directionalIcon.color = color
             }
             directionalIcon.size = directionalIconModel.size.value
+            iconContainerHeightConstraint?.constant = directionalIcon.size.dimensions.height
             directionalIcon.surface = backgroundColorSurface
             showIconContainerView = true
         }

VDS/Components/Tilelet/TileletBadgeModel.swift

@@ -15,6 +15,9 @@ extension Tilelet {
         /// Text that will be used for the badge.
         public var text: String = ""
         
+        /// Text color that will be used for the badge.
+        public var textColor: Badge.TextColor?
+        
         /// Fill color that will be used for the badge.
         public var fillColor: Badge.FillColor
         
@@ -30,8 +33,9 @@ extension Tilelet {
         /// LineBreakMode used in Badge label.
         public var lineBreakMode: NSLineBreakMode
 
-        public init(text: String, fillColor: Badge.FillColor = .red, surface: Surface = .light, numberOfLines: Int = 0, maxWidth: CGFloat? = nil, lineBreakMode: NSLineBreakMode = .byTruncatingTail) {
+        public init(text: String, textColor: Badge.TextColor? = nil, fillColor: Badge.FillColor = .red, surface: Surface = .light, numberOfLines: Int = 0, maxWidth: CGFloat? = nil, lineBreakMode: NSLineBreakMode = .byTruncatingTail) {
             self.text = text
+            self.textColor = textColor
             self.fillColor = fillColor
             self.surface = surface
             self.numberOfLines = numberOfLines

VDS/Components/TitleLockup/TitleLockup.swift

@@ -12,7 +12,6 @@ import Combine
 
 /// Title Lockup ensures the readability of words on the screen
 /// with approved built in text size configurations.
-@objcMembers
 @objc(VDSTitleLockup)
 open class TitleLockup: View, ParentViewProtocol {
     

VDS/Components/Toggle/Toggle.swift

@@ -12,7 +12,6 @@ import Combine
 
 /// A toggle is a control that lets customers instantly turn on
 /// or turn off a single option, setting or function.
-@objcMembers
 @objc(VDSToggle)
 open class Toggle: Control, Changeable, FormFieldable, ParentViewProtocol {
     

VDS/Components/Toggle/ToggleView.swift

@@ -12,7 +12,6 @@ import Combine
 
 /// A toggle is a control that lets customers instantly turn on
 /// or turn off a single option, setting or function.
-@objcMembers
 @objc(VDSToggleView)
 open class ToggleView: Control, Changeable, FormFieldable {
     

VDS/Components/Tooltip/Tooltip.swift

@@ -13,7 +13,6 @@ import Combine
 /// A tooltip is an overlay that clarifies another component or content
 /// element. It is triggered when a customer hovers, clicks or taps
 /// the tooltip icon.
-@objcMembers
 @objc(VDSTooltip)
 open class Tooltip: Control, TooltipLaunchable {
     

VDS/Components/Tooltip/TooltipAlertViewController.swift

@@ -10,7 +10,6 @@ import UIKit
 import Combine
 import VDSCoreTokens
 
-@objcMembers
 @objc(VDSTooltipAlertViewController)
 open class TooltipAlertViewController: UIViewController, Surfaceable {
     

VDS/Components/Tooltip/TooltipDialog.swift

@@ -9,7 +9,6 @@ import Foundation
 import UIKit
 import VDSCoreTokens
 
-@objcMembers
 @objc(VDSTooltipDialog)
 open class TooltipDialog: View, UIScrollViewDelegate, ParentViewProtocol {
     

VDS/Extensions/UIColor+VDSColor.swift

@@ -187,10 +187,4 @@ extension UIColor {
         guard let found else { return nil}
         return found
     }
-    
-    public var surface: Surface {
-        var greyScale: CGFloat = 0
-        getWhite(&greyScale, alpha: nil)
-        return greyScale < 0.5 ? .dark : .light
-    }
 }

VDS/Extensions/UIColor.swift

@@ -192,4 +192,14 @@ extension UIColor {
         }
         self.init(red: CGFloat(r) / 255, green: CGFloat(g) / 255, blue: CGFloat(b) / 255, alpha: CGFloat(a) / 255)
     }
+    
+    internal func isDark() -> Bool {
+        var white: CGFloat = 0
+        var alpha: CGFloat = 0
+        if getWhite(&white, alpha: &alpha) {
+            return white < 0.5
+        }
+        
+        return false 
+    }
 }

VDS/SupportingFiles/ReleaseNotes.txt

@@ -1,9 +1,25 @@
+1.0.76
+----------------
+- ONEAPP-11355 - ListUnordered - Finished Development
+- CXTDT-630735 - PriceLockup - Accessibility
+- CXTDT-626164 - FootnoteGroup - Dark mode
+- CXTDT-626180 - FootnoteItem - Symbol type padding
+- CXTDT-586383 - Table - Line style can be selected for each row.
+
+1.0.75
+----------------
+- CXTDT-624895 - Badge - Custom FillColor and TextColor
+- CXTDT-578885 - Table - Setting appropriate accessiblity label for each cell.
+
 1.0.74
 ----------------
 - CXTDT-591307 - DatePicker - Accessibility - #1 & #2
+- CXTDT-577374 - Label - Spanish - Accent mark displays incorrectly
 - CXTDT-595956 - Tilelet - Text Position does not work on Light surface
 - CXTDT-595952 - Tilelet - Aspect Ratio Width/height setting
+- CXTDT-595970 - Tilelet - Subtitle size options missing
 - CXTDT-595965 - Tilelet - Incorrect Mobile Padding
+- ONEAPP-10583 - Modal - Finished Development
 
 1.0.73
 ----------------

VDS/VDS.docc/VDS.md

@@ -39,7 +39,9 @@ Using the system allows designers and developers to collaborate more easily and
 - ``InputField``
 - ``Label``
 - ``Line``
+- ``ListUnordered``
 - ``Loader``
+- ``Modal``
 - ``Notification``
 - ``Pagination``
 - ``PriceLockup``