Add Picker and Option. (#176)

Part of #25.

Sources/Slipstream/Documentation.docc/Guides/SlipstreamForWebDevelopers.md

@@ -168,14 +168,14 @@ provided below is an organized table of W3C HTML tags and their equivalent Slips
 
  W3C tag | Slipstream view
 :--------|:----------------
-[`<form>`](https://html.spec.whatwg.org/multipage/sections.html#the-form-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
+[`<form>`](https://html.spec.whatwg.org/multipage/sections.html#the-form-element) | ``Form``
 [`<label>`](https://html.spec.whatwg.org/multipage/sections.html#the-label-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
-[`<input>`](https://html.spec.whatwg.org/multipage/sections.html#the-input-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
-[`<button>`](https://html.spec.whatwg.org/multipage/sections.html#the-button-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
-[`<select>`](https://html.spec.whatwg.org/multipage/sections.html#the-select-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
+[`<input>`](https://html.spec.whatwg.org/multipage/sections.html#the-input-element) | ``TextField``
+[`<button>`](https://html.spec.whatwg.org/multipage/sections.html#the-button-element) | ``Button``
+[`<select>`](https://html.spec.whatwg.org/multipage/sections.html#the-select-element) | ``Picker``
 [`<datalist>`](https://html.spec.whatwg.org/multipage/sections.html#the-datalist-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
 [`<optgroup>`](https://html.spec.whatwg.org/multipage/sections.html#the-optgroup-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
-[`<option>`](https://html.spec.whatwg.org/multipage/sections.html#the-option-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
+[`<option>`](https://html.spec.whatwg.org/multipage/sections.html#the-option-element) | ``Option``
 [`<textarea>`](https://html.spec.whatwg.org/multipage/sections.html#the-textarea-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
 [`<output>`](https://html.spec.whatwg.org/multipage/sections.html#the-output-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
 [`<progress>`](https://html.spec.whatwg.org/multipage/sections.html#the-progress-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)

Sources/Slipstream/Documentation.docc/W3C/W3CViews.md

@@ -77,6 +77,8 @@ The complete W3C HTML elements standard can be found [here](https://html.spec.wh
 - ``Form``
 - ``TextField``
 - ``Button``
+- ``Picker``
+- ``Option``
 
 ### Scripting
 

Sources/Slipstream/W3C/Elements/Forms/Option.swift

@@ -0,0 +1,27 @@
+import Foundation
+
+import SwiftSoup
+
+/// An option in a ``Picker``.
+///
+/// - SeeAlso: W3C [option](https://html.spec.whatwg.org/multipage/form-elements.html#the-option-element) specification.
+@available(iOS 17.0, macOS 14.0, *)
+public struct Option: View {
+  /// Creates an option with an optional value.
+  public init(_ label: String, value: String? = nil) {
+    self.label = label
+    self.value = value
+  }
+
+  @_documentation(visibility: private)
+  public func render(_ container: Element, environment: EnvironmentValues) throws {
+    let element = try container.appendElement("option")
+    if let value {
+      try element.attr("value", value)
+    }
+    try element.text(label)
+  }
+
+  private let label: String
+  private let value: String?
+}

Sources/Slipstream/W3C/Elements/Forms/Picker.swift

@@ -0,0 +1,33 @@
+import Foundation
+
+import SwiftSoup
+
+/// A picker represents a control for selecting amongst a set of options.
+///
+/// ```swift
+/// struct MySiteContent: View {
+///   var body: some View {
+///     Body {
+///       Picker {
+///         Option("option1", value: "Option 1")
+///         Option("option2", value: "Option 2")
+///       }
+///     }
+///   }
+/// }
+/// ```
+///
+/// - SeeAlso: W3C [select](https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element) specification.
+@available(iOS 17.0, macOS 14.0, *)
+public struct Picker<Content>: W3CElement where Content: View {
+  @_documentation(visibility: private)
+  public let tagName: String = "select"
+
+  @_documentation(visibility: private)
+  @ViewBuilder public let content: () -> Content
+
+  /// Creates a picker view.
+  public init(@ViewBuilder content: @escaping () -> Content) {
+    self.content = content
+  }
+}

Tests/SlipstreamTests/W3C/Forms/OptionTests.swift

@@ -0,0 +1,14 @@
+import Foundation
+import Testing
+
+import Slipstream
+
+struct OptionTests {
+  @Test func noValue() throws {
+    try #expect(renderHTML(Option("Label")) == #"<option>Label</option>"#)
+  }
+
+  @Test func withValue() throws {
+    try #expect(renderHTML(Option("Label", value: "value")) == #"<option value="value">Label</option>"#)
+  }
+}

Tests/SlipstreamTests/W3C/Forms/PickerTests.swift

@@ -0,0 +1,10 @@
+import Foundation
+import Testing
+
+import Slipstream
+
+struct PickerTests {
+  @Test func emptyBlock() throws {
+    try #expect(renderHTML(Picker {}) == #"<select></select>"#)
+  }
+}