Make progress on the components

Sources/HTMLKitComponents/Actions/SubmitAction.swift

@@ -4,19 +4,19 @@ public struct SubmitAction: Action {
 
     public func validate(_ target: String, _ validators: [Validator]) -> SubmitAction {
 
-        var newSelf = self
+        var copy = self
 
         if !validators.isEmpty {
 
             let result = validators.map { "{\"field\":\"\($0.field)\",\"rule\":\"\($0.rule)\"}" }
 
-            newSelf.actions.append("$('#\(target.escape())').validate('[\(result.joined(separator: ","))]');")
+            copy.actions.append("$('#\(target.escape())').validate('[\(result.joined(separator: ","))]');")
 
-            return newSelf
+            return copy
         }
 
-        newSelf.actions.append("$('#\(target.escape())').validate('[]');")
+        copy.actions.append("$('#\(target.escape())').validate('[]');")
 
-        return newSelf
+        return copy
     }
 }

Sources/HTMLKitComponents/Actions/ViewAction.swift

@@ -9,10 +9,10 @@ public struct ViewAction: Action {
     /// - Returns: The action
     public func show(_ target: String) -> ViewAction {
 
-        var newSelf = self
-        newSelf.actions.append("$('#\(target.escape())').show();")
+        var copy = self
+        copy.actions.append("$('#\(target.escape())').show();")
 
-        return newSelf
+        return copy
     }
 
     /// Hide a target based on a event.
@@ -22,10 +22,10 @@ public struct ViewAction: Action {
     /// - Returns: The action
     public func hide(_ target: String) -> ViewAction {
 
-        var newSelf = self
-        newSelf.actions.append("$('#\(target.escape())').hide();")
+        var copy = self
+        copy.actions.append("$('#\(target.escape())').hide();")
 
-        return newSelf
+        return copy
     }
 
     /// Play an animation based on a event.
@@ -35,10 +35,10 @@ public struct ViewAction: Action {
     /// - Returns: The action
     public func animate(_ target: String) -> ViewAction {
 
-        var newSelf = self
-        newSelf.actions.append("$('#\(target.escape())').animate();")
+        var copy = self
+        copy.actions.append("$('#\(target.escape())').animate();")
 
-        return newSelf
+        return copy
     }
 
     /// Open a target based on a event.
@@ -48,10 +48,10 @@ public struct ViewAction: Action {
     /// - Returns: The action
     public func open(_ target: String) -> ViewAction {
 
-        var newSelf = self
-        newSelf.actions.append("$('#\(target.escape())').open();")
+        var copy = self
+        copy.actions.append("$('#\(target.escape())').open();")
 
-        return newSelf
+        return copy
     }
 
     /// Close a target based on a event.
@@ -61,9 +61,9 @@ public struct ViewAction: Action {
     /// - Returns: The action
     public func close(_ target: String) -> ViewAction {
 
-        var newSelf = self
-        newSelf.actions.append("$('#\(target.escape())').close();")
+        var copy = self
+        copy.actions.append("$('#\(target.escape())').close();")
 
-        return newSelf
+        return copy
     }
 }

Sources/HTMLKitComponents/Components/Alert.swift

@@ -15,7 +15,7 @@ public struct Alert: View, Identifiable, Modifiable {
     internal var id: String?
 
     /// The body content of the alert
-    internal var content: [Content]
+    internal let content: [Content]
 
     /// The class names for the alert.
     internal var classes: [String]
@@ -59,10 +59,15 @@ extension Alert: ViewModifier {
         return self.mutate(zindex: index.value)
     }
 
+    @available(*, deprecated, message: "Use the background(_:) modifier instead.")
     public func backgroundColor(_ color: Tokens.BackgroundColor) -> Alert {
         return self.mutate(backgroundcolor: color.value)
     }
 
+    public func background(_ color: Tokens.BackgroundColor) -> Alert {
+        return self.mutate(backgroundcolor: color.value)
+    }
+
     public func hidden(_ condition: Bool = true) -> Alert {
 
         if condition {
@@ -80,16 +85,17 @@ extension Alert: ViewModifier {
         return self.mutate(padding: length.value, insets: insets)
     }
 
+    @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.")
     public func borderShape(_ shape: Tokens.BorderShape) -> Alert {
         return self.mutate(bordershape: shape.value)
     }
 
-    public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> Alert {
-        return self.mutate(border: color.value, width: width.value)
+    public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> Alert {
+        return self.mutate(border: color.value, width: width.value, shape: shape?.value)
     }
 
     public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight?, alignment: Tokens.FrameAlignment?) -> Alert {
-        return mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
+        return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
     }
 
     public func margin(insets: EdgeSet, length: Tokens.MarginLength) -> Alert {

Sources/HTMLKitComponents/Components/BarMark.swift

@@ -15,10 +15,10 @@ import HTMLKit
 public struct BarMark: View, Modifiable {
 
     /// The value of the mark.
-    internal var value: Int
+    internal let value: Int
 
     /// The title of the mark.
-    internal var label: String
+    internal let label: String
 
     /// The class names of the bar mark.
     internal var classes: [String]
@@ -54,6 +54,6 @@ public struct BarMark: View, Modifiable {
     ///
     /// - Returns: The mark
     public func foregroundColor(_ color: Tokens.ForegroundColor) -> BarMark {
-        return self.mutate(class: "foreground:\(color.value)")
+        return self.mutate(classes: "foreground:\(color.value)")
     }
 }

Sources/HTMLKitComponents/Components/Button.swift

@@ -16,10 +16,10 @@ public struct Button: View, Modifiable, Actionable {
     internal var id: String?
 
     /// The role of the button.
-    internal var role: HTMLKit.Values.Button
+    internal let role: HTMLKit.Values.Button
 
     /// The body content of the button.
-    internal var content: [Content]
+    internal let content: [Content]
 
     /// The class names for the button.
     internal var classes: [String]
@@ -118,10 +118,15 @@ extension Button: PressEvent {
 
 extension Button: ViewModifier {
 
+    @available(*, deprecated, message: "Use the background(_:) modifier instead.")
     public func backgroundColor(_ color: Tokens.BackgroundColor) -> Button {
         return self.mutate(backgroundcolor: color.value)
     }
 
+    public func background(_ color: Tokens.BackgroundColor) -> Button {
+        return self.mutate(backgroundcolor: color.value)
+    }
+
     public func opacity(_ value: Tokens.OpacityValue) -> Button {
         return self.mutate(opacity: value.value)
     }
@@ -147,16 +152,17 @@ extension Button: ViewModifier {
         return self.mutate(padding: length.value, insets: insets)
     }
 
+    @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.")
     public func borderShape(_ shape: Tokens.BorderShape) -> Button {
         return self.mutate(bordershape: shape.value)
     }
 
-    public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> Button {
-        return self.mutate(border: color.value, width: width.value)
+    public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> Button {
+        return self.mutate(border: color.value, width: width.value, shape: shape?.value)
     }
 
     public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Button {
-        return mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
+        return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
     }
 
     public func margin(insets: EdgeSet, length: Tokens.MarginLength = .small) -> Button {

Sources/HTMLKitComponents/Components/Card.swift

@@ -19,10 +19,10 @@ public struct Card: View, Modifiable, Identifiable {
     internal var id: String?
 
     /// The header content of the card.
-    internal var header: [Content]?
+    internal let header: [Content]?
 
     /// The body content of the card.
-    internal var content: [Content]
+    internal let content: [Content]
 
     /// The class names for the card.
     internal var classes: [String]
@@ -32,6 +32,7 @@ public struct Card: View, Modifiable, Identifiable {
     /// - Parameter content: The card's content
     public init(@ContentBuilder<Content> content: () -> [Content]) {
 
+        self.header = nil
         self.content = content()
         self.classes = ["card"]
     }
@@ -95,10 +96,15 @@ extension Card: ViewModifier {
         return self.mutate(zindex: index.value)
     }
 
+    @available(*, deprecated, message: "Use the background(_:) modifier instead.")
     public func backgroundColor(_ color: Tokens.BackgroundColor) -> Card {
         return self.mutate(backgroundcolor: color.value)
     }
 
+    public func background(_ color: Tokens.BackgroundColor) -> Card {
+        return self.mutate(backgroundcolor: color.value)
+    }
+
     public func hidden(_ condition: Bool = true) -> Card {
 
         if condition {
@@ -116,16 +122,17 @@ extension Card: ViewModifier {
         return self.mutate(padding: length.value, insets: insets)
     }
 
+    @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.")
     public func borderShape(_ shape: Tokens.BorderShape) -> Card {
         return self.mutate(bordershape: shape.value)
     }
 
-    public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> Card {
-        return self.mutate(border: color.value, width: width.value)
+    public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> Card {
+        return self.mutate(border: color.value, width: width.value, shape: shape?.value)
     }
 
     public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Card {
-        return mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
+        return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
     }
 
     public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Card {

Sources/HTMLKitComponents/Components/Carousel.swift

@@ -98,24 +98,30 @@ extension Carousel: ViewModifier {
         return self.mutate(padding: length.value, insets: insets)
     }
 
-    public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> Carousel {
-        return self.mutate(border: color.value, width: width.value)
+    public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> Carousel {
+        return self.mutate(border: color.value, width: width.value, shape: shape?.value)
     }
 
+    @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.")
     public func borderShape(_ shape: Tokens.BorderShape) -> Carousel {
         return self.mutate(bordershape: shape.value)
     }
 
+    @available(*, deprecated, message: "Use the background(_:) modifier instead.")
     public func backgroundColor(_ color: Tokens.BackgroundColor) -> Carousel {
         return self.mutate(backgroundcolor: color.value)
     }
 
+    public func background(_ color: Tokens.BackgroundColor) -> Carousel {
+        return self.mutate(backgroundcolor: color.value)
+    }
+
     public func colorScheme(_ scheme: Tokens.ColorScheme) -> Carousel {
         return self.mutate(scheme: scheme.value)
     }
 
     public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Carousel {
-        return mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
+        return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
     }
 
     public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Carousel {

Sources/HTMLKitComponents/Components/Chart.swift

@@ -43,6 +43,6 @@ public struct Chart: View, Modifiable {
     ///
     /// - Returns: The chart
     public func innerRadius(_ color: Tokens.InnerRadius) -> Chart {
-        return self.mutate(class: "radius:\(color.value)")
+        return self.mutate(classes: "radius:\(color.value)")
     }
 }

Sources/HTMLKitComponents/Components/CheckField.swift

@@ -27,7 +27,7 @@ public struct CheckField: View, Modifiable, Selectable, Identifiable {
     internal var isSelected: Bool
 
     /// The body content of the field.
-    internal var content: Content
+    internal let content: Content
 
     /// The class names for the field.
     internal var classes: [String]
@@ -130,24 +130,30 @@ extension CheckField: ViewModifier {
         return self.mutate(padding: length.value, insets: insets)
     }
 
-    public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small) -> CheckField {
-        return self.mutate(border: color.value, width: width.value)
+    public func border(_ color: Tokens.BorderColor, width: Tokens.BorderWidth = .small, shape: Tokens.BorderShape? = nil) -> CheckField {
+        return self.mutate(border: color.value, width: width.value, shape: shape?.value)
     }
 
+    @available(*, deprecated, message: "Use the border(_:width:shape:) modifier instead.")
     public func borderShape(_ shape: Tokens.BorderShape) -> CheckField {
         return self.mutate(bordershape: shape.value)
     }
 
+    @available(*, deprecated, message: "Use the background(_:) modifier instead.")
     public func backgroundColor(_ color: Tokens.BackgroundColor) -> CheckField {
         return self.mutate(backgroundcolor: color.value)
     }
 
+    public func background(_ color: Tokens.BackgroundColor) -> CheckField {
+        return self.mutate(backgroundcolor: color.value)
+    }
+
     public func colorScheme(_ scheme: Tokens.ColorScheme) -> CheckField {
         return self.mutate(scheme: scheme.value)
     }
 
     public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> CheckField {
-        return mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
+        return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
     }
 
     public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> CheckField {