Make progress on the components

Sources/Commands/Components/DeployCommand.swift

@@ -18,11 +18,9 @@ internal struct DeployCommand {
         return CommandLine.arguments[2]
     }
 
-    private static let manager = FileManager.default
-
     internal static func main() throws {
 
-        if !manager.fileExists(atPath: sourcePath) {
+        if !FileManager.default.fileExists(atPath: sourcePath) {
             print("No valid source path.")
 
             exit(1)
@@ -47,15 +45,15 @@ internal struct DeployCommand {
         /* Copyright (c) 2019 - 2026 Vapor Community - Licensed under MIT (https://github.com/vapor-community/HTMLKit/blob/main/LICENSE) */
         """
 
-        if !manager.fileExists(atPath: target) {
-            try manager.createDirectory(atPath: target, withIntermediateDirectories: true)
+        if !FileManager.default.fileExists(atPath: target) {
+            try FileManager.default.createDirectory(atPath: target, withIntermediateDirectories: true)
         }
 
-        if !manager.fileExists(atPath: target + filename) {
-            manager.createFile(atPath: target + filename, contents: template.data(using: .utf8))
+        if !FileManager.default.fileExists(atPath: target + filename) {
+            FileManager.default.createFile(atPath: target + filename, contents: template.data(using: .utf8))
         }
 
-        if let enumerator = manager.enumerator(at: URL(fileURLWithPath: source), includingPropertiesForKeys: nil, options: [.skipsHiddenFiles]) {
+        if let enumerator = FileManager.default.enumerator(at: URL(fileURLWithPath: source), includingPropertiesForKeys: nil, options: [.skipsHiddenFiles]) {
 
             for case let path as URL in enumerator {
 
@@ -97,15 +95,15 @@ internal struct DeployCommand {
         /* Copyright (c) 2019 - 2026 Vapor Community - Licensed under MIT (https://github.com/vapor-community/HTMLKit/blob/main/LICENSE) */
         """
 
-        if !manager.fileExists(atPath: target) {
-            try manager.createDirectory(atPath: target, withIntermediateDirectories: true)
+        if !FileManager.default.fileExists(atPath: target) {
+            try FileManager.default.createDirectory(atPath: target, withIntermediateDirectories: true)
         }
 
-        if !manager.fileExists(atPath: target + filename) {
-            manager.createFile(atPath: target + filename, contents: template.data(using: .utf8))
+        if !FileManager.default.fileExists(atPath: target + filename) {
+            FileManager.default.createFile(atPath: target + filename, contents: template.data(using: .utf8))
         }
 
-        if let enumerator = manager.enumerator(at: URL(fileURLWithPath: source), includingPropertiesForKeys: nil, options: [.skipsHiddenFiles]) {
+        if let enumerator = FileManager.default.enumerator(at: URL(fileURLWithPath: source), includingPropertiesForKeys: nil, options: [.skipsHiddenFiles]) {
 
             for case let path as URL in enumerator {
 

Sources/HTMLKitComponents/Components/Alert.swift

@@ -30,10 +30,10 @@ public struct Alert: View, Identifiable, Modifiable {
     }
 
     public var body: Content {
-        Division {
+        Output {
             content
         }
-        .role(.alert)
+        .role(.status)
         .class(classes)
         .modify(unwrap: id) {
             $0.id($1)
@@ -95,7 +95,7 @@ extension Alert: ViewModifier {
         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 {
+    public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Alert {
         return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
     }
 

Sources/HTMLKitComponents/Components/BarMark.swift

@@ -6,20 +6,20 @@ import HTMLKit
 ///
 /// ```swift
 /// Chart {
-///     BarMark(value: 50, label: "Lorem ipsum")
+///     BarMark("Lorem ipsum", value: 50)
 ///         .foregroundColor(.random)
-///     BarMark(value: 50, label: "Lorem ipsum")
+///     BarMark("Lorem ipsum", value: 50)
 ///         .foregroundColor(.random)
 /// }
 /// ```
 public struct BarMark: View, Modifiable {
 
+    /// The title of the mark.
+    internal let label: DynamicString
+
     /// The value of the mark.
     internal let value: Int
 
-    /// The title of the mark.
-    internal let label: String
-
     /// The class names of the bar mark.
     internal var classes: [String]
 
@@ -28,20 +28,51 @@ public struct BarMark: View, Modifiable {
     /// - Parameters:
     ///   - value: The value at which to plot the mark.
     ///   - label: The title used to label the mark.
+    @available(*, deprecated, message: "Use the init(label:value:) initializer instead.")
     public init(value: Int, label: String) {
 
+        self.label = .literal(label)
+        self.value = value
+        self.classes = ["mark", "type:bar"]
+    }
+
+    /// Create a bar mark.
+    ///
+    /// - Parameters:
+    ///   - label: The title used to label the mark.
+    ///   - value: The value at which to plot the mark.
+    @_disfavoredOverload
+    public init(_ label: any StringProtocol & Content, value: Int) {
+
+        self.label = .literal(String(label))
+        self.value = value
+        self.classes = ["mark", "type:bar"]
+    }
+
+    /// Create a bar mark.
+    ///
+    /// - Parameters:
+    ///   - localizedStringKey: The key of the localized string to look for.
+    ///   - value: The value at which to plot the mark.
+    public init(_ localizedStringKey: LocalizedStringKey, value: Int) {
+
+        self.label = .localized(localizedStringKey, nil)
         self.value = value
-        self.label = label
-        self.classes = ["mark type:bar"]
+        self.classes = ["mark", "type:bar"]
     }
 
     public var body: Content {
-        HTMLKit.Group {
+        Group {
             Rectangle {
-                "\(value)"
+                value
             }
             Custom(name: "text") {
-                label
+                if case .localized(let value, let table) = label {
+                    LocalizedString(key: value, table: table)
+                }
+                if case .literal(let string) = label {
+                    string
+                }
             }
             .custom(key: "class", value: "mark-label", context: .trusted)
         }

Sources/HTMLKitComponents/Components/Card.swift

@@ -51,10 +51,12 @@ public struct Card: View, Modifiable, Identifiable {
 
     public var body: Content {
         Division {
-            Division {
-                header
+            if let header = header {
+                Division {
+                    header
+                }
+                .class("card-header")
             }
-            .class("card-header")
             Division {
                 content
             }

Sources/HTMLKitComponents/Components/DatePicker.swift

@@ -90,7 +90,7 @@ public struct DatePicker: View, Modifiable, Identifiable {
                         .namespace("http://www.w3.org/2000/svg")
                         .fill("currentColor")
                         .stroke("currentColor", width: 2, cap: .round, join: .round)
-                        .custom(key: "aria-hidden", value: true)
+                        .accessibilityHidden()
                     }
                     .type(.button)
                     .value(verbatim: "previous")
@@ -112,7 +112,7 @@ public struct DatePicker: View, Modifiable, Identifiable {
                         .namespace("http://www.w3.org/2000/svg")
                         .fill("currentColor")
                         .stroke("currentColor", width: 2, cap: .round, join: .round)
-                        .custom(key: "aria-hidden", value: true)
+                        .accessibilityHidden()
                     }
                     .type(.button)
                     .value(verbatim: "next")

Sources/HTMLKitComponents/Components/Disclosure.swift

@@ -5,16 +5,23 @@ import HTMLKit
 /// Use `Disclosure` to reveal or hide content when interacted with.
 ///
 /// ```swift
-/// Disclosure("Lorem ipsum") {
+/// Disclosure {
+///     Text {
+///         "Lorem ipsum..."
+///     }
+/// } label: {
 ///     Text {
 ///         "Lorem ipsum..."
 ///     }
 /// }
 /// ```
-public struct Disclosure: View, Modifiable {
+public struct Disclosure: View, Modifiable, Identifiable {
+
+    /// The unique identifier of the disclosure.
+    internal var id: String?
 
     /// The label of the disclosure.
-    internal let label: Content
+    internal let label: [Content]
 
     /// The disclosure's content.
     internal let content: [Content]
@@ -27,10 +34,11 @@ public struct Disclosure: View, Modifiable {
     /// - Parameters:
     ///   - label: The label to describe the content.
     ///   - content: The disclosure's content.
+    @available(*, deprecated, message: "Use the init(content:label:) initializer instead.")
     @_disfavoredOverload
-    public init(_ label: String, @ContentBuilder<Content> content: () -> [Content]) {
+    public init(_ label: any StringProtocol & Content, @ContentBuilder<Content> content: () -> [Content]) {
 
-        self.label = label
+        self.label = [label]
         self.content = content()
         self.classes = ["disclosure"]
     }
@@ -40,42 +48,64 @@ public struct Disclosure: View, Modifiable {
     /// - Parameters:
     ///   - label: The key of the localized string to describe the content.
     ///   - content: The disclosure's content.
+    @available(*, deprecated, message: "Use the init(content:label:) initializer instead.")
     public init(_ label: LocalizedStringKey, @ContentBuilder<Content> content: () -> [Content]) {
 
-        self.label = LocalizedString(key: label)
+        self.label = [LocalizedString(key: label)]
+        self.content = content()
+        self.classes = ["disclosure"]
+    }
+
+    /// Create a disclosure.
+    ///
+    /// - Parameters:
+    ///   - content: The disclosure's content.
+    ///   - label: The disclosure's label.
+    public init(@ContentBuilder<Content> content: () -> [Content], @ContentBuilder<Content> label: () -> [Content]) {
+
+        self.label = label()
         self.content = content()
         self.classes = ["disclosure"]
     }
 
     public var body: Content {
-        Division {
-            Division {
-                Paragraph {
+        Details {
+            Summary {
+                Division {
                     label
                 }
                 .class("disclosure-label")
                 Vector {
-                    Title {
-                        "State Indicator"
-                    }
                     Path {
                     }
                     .draw("M7.28,2.241C6.987,1.957 6.987,1.497 7.28,1.213C7.573,0.929 8.048,0.929 8.341,1.213L14.811,7.486C15.103,7.77 15.103,8.23 14.811,8.514L8.28,14.787C7.987,15.071 7.512,15.071 7.22,14.787C6.927,14.503 6.927,14.043 7.22,13.759L13.22,8L7.28,2.241Z")
                 }
                 .viewBox(x: 0, y: 0, width: 20, height: 16)
+                .width(20)
+                .height(16)
                 .namespace("http://www.w3.org/2000/svg")
-                .class("state-indicator")
-                .custom(key: "aria-hidden", value: true)
+                .class("disclosure-triangle")
+                .accessibilityHidden()
             }
             .class("disclosure-head")
             Division {
-                Division {
-                    content
-                }
-                .class("disclosure-content")
+                content
             }
             .class("disclosure-body")
         }
         .class(classes)
+        .modify(unwrap: id) {
+            $0.id($1)
+        }
+        .custom(key: "name", value: "disclosure")
+    }
+
+    /// Set the identifier for the disclosure.
+    ///
+    /// - Parameter value: The value of the identifier
+    ///
+    /// - Returns: The disclosure
+    public func tag(_ value: String) -> Disclosure {
+        return self.mutate(id: value)
     }
 }

Sources/HTMLKitComponents/Components/SectorMark.swift

@@ -6,20 +6,20 @@ import HTMLKit
 ///
 /// ```swift
 /// Chart {
-///     SectorMark(value: 50, label: "Lorem ipsum")
+///     SectorMark("Lorem ipsum", value: 50)
 ///         .foregroundColor(.random)
-///     SectorMark(value: 50, label: "Lorem ipsum")
+///     SectorMark("Lorem ipsum", value: 50)
 ///         .foregroundColor(.random)
 /// }
 /// ```
 public struct SectorMark: View, Modifiable {
 
+    /// The title of the mark.
+    internal let label: DynamicString
+
     /// The value of the mark.
     internal let value: Int
 
-    /// The title of the mark.
-    internal let label: String
-
     /// The class names of the sector mark.
     internal var classes: [String]
 
@@ -28,18 +28,53 @@ public struct SectorMark: View, Modifiable {
     /// - Parameters:
     ///   - value: The value at which to plot the mark.
     ///   - label: The title used to label the mark.
+    @available(*, deprecated, message: "Use the init(label:value:) initializer instead.")
     public init(value: Int, label: String) {
 
         self.value = value
-        self.label = label
-        self.classes = ["mark type:pie"]
+        self.label = .literal(label)
+        self.classes = ["mark", "type:pie"]
+    }
+
+    /// Create a sector mark.
+    ///
+    /// - Parameters:
+    ///   - label: The title used to label the mark.
+    ///   - value: The value at which to plot the mark.
+    @_disfavoredOverload
+    public init(label: any StringProtocol & Content, value: Int) {
+
+        self.label = .literal(String(label))
+        self.value = value
+        self.classes = ["mark", "type:pie"]
+    }
+
+    /// Create a sector mark.
+    ///
+    /// - Parameters:
+    ///   - localizedStringKey: The key of the localized string to look for.
+    ///   - value: The value at which to plot the mark.
+    public init(_ localizedStringKey: LocalizedStringKey, value: Int) {
+
+        self.label = .localized(localizedStringKey, nil)
+        self.value = value
+        self.classes = ["mark", "type:pie"]
     }
 
     public var body: Content {
-        HTMLKit.Group {
+        Group {
             Path {
-                "\(value)"
+                value
+            }
+            Custom(name: "text") {
+                if case .localized(let value, let table) = label {
+                    LocalizedString(key: value, table: table)
+                }
+                if case .literal(let string) = label {
+                    string
+                }
             }
+            .custom(key: "class", value: "mark-label", context: .trusted)
         }
         .class(classes)
     }