Make progress on the components

Sources/Commands/Components/DeployCommand.swift

@@ -44,7 +44,7 @@ internal struct DeployCommand {
 
         let template = """
         @charset "utf-8";
-        /* Copyright (c) 2019 - 2024 Vapor Community - Licensed under MIT (https://github.com/vapor-community/HTMLKit/blob/main/LICENSE) */
+        /* Copyright (c) 2019 - 2026 Vapor Community - Licensed under MIT (https://github.com/vapor-community/HTMLKit/blob/main/LICENSE) */
         """
 
         if !manager.fileExists(atPath: target) {
@@ -94,7 +94,7 @@ internal struct DeployCommand {
     private static func bundle(js source: String, to target: String, with filename: String, option: BundleOption = .minified) throws {
 
         let template = """
-        /* Copyright (c) 2019 - 2024 Vapor Community - Licensed under MIT (https://github.com/vapor-community/HTMLKit/blob/main/LICENSE) */
+        /* Copyright (c) 2019 - 2026 Vapor Community - Licensed under MIT (https://github.com/vapor-community/HTMLKit/blob/main/LICENSE) */
         """
 
         if !manager.fileExists(atPath: target) {

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]
@@ -33,7 +33,7 @@ public struct Alert: View, Identifiable, Modifiable {
         Division {
             content
         }
-        .class(classes.joined(separator: " "))
+        .class(classes)
         .modify(unwrap: id) {
             $0.id($1)
         }
@@ -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]
@@ -43,9 +43,9 @@ public struct BarMark: View, Modifiable {
             Custom(name: "text") {
                 label
             }
-            .custom(key: "class", value: "mark-label")
+            .custom(key: "class", value: "mark-label", context: .trusted)
         }
-        .class(classes.joined(separator: " "))
+        .class(classes)
     }
 
     /// Fill the foreground for the mark.
@@ -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]
@@ -56,7 +56,7 @@ public struct Button: View, Modifiable, Actionable {
             self.content
         }
         .type(role)
-        .class(self.classes.joined(separator: " "))
+        .class(classes)
         .modify(unwrap: id) {
             $0.id($1)
         }
@@ -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"]
     }
@@ -41,8 +42,7 @@ public struct Card: View, Modifiable, Identifiable {
     /// - Parameters:
     ///   - content: The card's content.
     ///   - header: The card's header.
-    public init(@ContentBuilder<Content> content: () -> [Content],
-                @ContentBuilder<Content> header: () -> [Content]) {
+    public init(@ContentBuilder<Content> content: () -> [Content], @ContentBuilder<Content> header: () -> [Content]) {
 
         self.content = content()
         self.header = header()
@@ -60,7 +60,7 @@ public struct Card: View, Modifiable, Identifiable {
             }
             .class("card-body")
         }
-        .class(classes.joined(separator: " "))
+        .class(classes)
         .modify(unwrap: id) {
             $0.id($1)
         }
@@ -95,10 +95,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 +121,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

@@ -50,7 +50,7 @@ public struct Carousel: View, Identifiable, Modifiable {
             }
             .class("carousel-indication")
         }
-        .class(classes.joined(separator: " "))
+        .class(classes)
         .modify(unwrap: id) {
             $0.id($1)
         }
@@ -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

@@ -34,7 +34,7 @@ public struct Chart: View, Modifiable {
             content
         }
         .namespace("http://www.w3.org/2000/svg")
-        .class(classes.joined(separator: " "))
+        .class(classes)
     }
 
     /// Set the inner radius for the chart.
@@ -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)")
     }
 }