From f78b906f563722cb94c7c06859851586a8f07e69 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Tue, 16 Jul 2024 16:35:41 +0200
Subject: [PATCH 01/19] Don't depend on Phoenix.HTML.Tag.content_tag in
 Showcase

---
 lib/bitstyles_phoenix/showcase.ex | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/lib/bitstyles_phoenix/showcase.ex b/lib/bitstyles_phoenix/showcase.ex
index 12a797e..fc40916 100644
--- a/lib/bitstyles_phoenix/showcase.ex
+++ b/lib/bitstyles_phoenix/showcase.ex
@@ -1,8 +1,7 @@
 defmodule BitstylesPhoenix.Showcase do
   @moduledoc false
 
-  import Phoenix.HTML, only: [safe_to_string: 1]
-  import Phoenix.HTML.Tag, only: [content_tag: 3]
+  import Phoenix.HTML, only: [safe_to_string: 1, attributes_escape: 1, html_escape: 1]
 
   defmacro story(name, doctest_iex_code, doctest_expected_results, opts \\ []) do
     default_version = BitstylesPhoenix.Bitstyles.default_version() |> String.to_atom()
@@ -154,4 +153,13 @@ defmodule BitstylesPhoenix.Showcase do
       """
     end
   end
+
+  # copy-paste from phoenix_html_helpers because `content_tag` was removed in phoenix_html v4
+  # and we don't want to depend on phoenix_html_helpers
+  defp content_tag(name, content, attrs) when is_list(attrs) do
+    name = to_string(name)
+    {:safe, escaped} = html_escape(content)
+    sorted_attrs = attrs |> Enum.sort() |> attributes_escape() |> elem(1)
+    {:safe, [?<, name, sorted_attrs, ?>, escaped, ?<, ?/, name, ?>]}
+  end
 end

From f6062c6fb3af330fab65e52feb2249b307080da6 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Tue, 16 Jul 2024 16:43:49 +0200
Subject: [PATCH 02/19] Don't depend on Phoenix.HTML.Tag.content_tag in Heading

---
 lib/bitstyles_phoenix/component/heading.ex | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/bitstyles_phoenix/component/heading.ex b/lib/bitstyles_phoenix/component/heading.ex
index c06e4d0..e8c10b1 100644
--- a/lib/bitstyles_phoenix/component/heading.ex
+++ b/lib/bitstyles_phoenix/component/heading.ex
@@ -282,9 +282,9 @@ defmodule BitstylesPhoenix.Component.Heading do
     ~H"""
       <div class={@class} {@extra}>
         <div class={classnames("u-flex u-items-center")}>
-          <%= Phoenix.HTML.Tag.content_tag @tag, class: classnames(["u-margin-0 u-margin-m-right u-break-text", assigns[:heading_class]]) do %>
+          <.dynamic_tag name={@tag} class={classnames(["u-margin-0 u-margin-m-right u-break-text", assigns[:heading_class]])}>
             <%= render_slot(@inner_block) %>
-          <% end %>
+          </.dynamic_tag>
           <%= assigns[:title_extra] && render_slot(@title_extra) %>
         </div>
         <%= if assigns[:action] do %>

From 5cb5deb3325525311d1a8aaef07faed32a17fce2 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Tue, 16 Jul 2024 17:02:46 +0200
Subject: [PATCH 03/19] Copy-paste "humanize" for default labels

---
 lib/bitstyles_phoenix/component/form.ex | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/lib/bitstyles_phoenix/component/form.ex b/lib/bitstyles_phoenix/component/form.ex
index 7b542ae..36c6ab9 100644
--- a/lib/bitstyles_phoenix/component/form.ex
+++ b/lib/bitstyles_phoenix/component/form.ex
@@ -755,7 +755,18 @@ defmodule BitstylesPhoenix.Component.Form do
     """
   end
 
-  defp default_label(field), do: PhxForm.humanize(field)
+  defp default_label(field) when is_atom(field), do: default_label(Atom.to_string(field))
+
+  defp default_label(field) when is_binary(field) do
+    bin =
+      if String.ends_with?(field, "_id") do
+        binary_part(field, 0, byte_size(field) - 3)
+      else
+        field
+      end
+
+    bin |> String.replace("_", " ") |> :string.titlecase()
+  end
 
   defp required_label(%{required: value} = assigns)
        when value not in [nil, false, "false"] do

From 791874525ddf385e92ed7b9295afd961dc10f13e Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Tue, 16 Jul 2024 17:09:15 +0200
Subject: [PATCH 04/19] Run tests with unlocked deps on CI

---
 .github/workflows/action.yml | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/.github/workflows/action.yml b/.github/workflows/action.yml
index b9a243f..945f775 100644
--- a/.github/workflows/action.yml
+++ b/.github/workflows/action.yml
@@ -17,6 +17,21 @@ jobs:
       - run: mix docs
       - name: Check if versions showcase mix script finishes
         run: mix run scripts/generate_version_showcase.ex
+
+
+  test-unlocked-deps:
+    runs-on: ubuntu-latest
+    name: unit (unlocked deps)
+    steps:
+      - uses: actions/checkout@v2
+      - uses: erlef/setup-beam@v1
+        with:
+          otp-version: '25.1'
+          elixir-version: '1.14.5'
+      - run: mix deps.unlock --all
+      - run: mix deps.get
+      - run: mix test
+
   demo:
     runs-on: ubuntu-latest
     name: demo

From 604f631c844e141de9a6902728a9fe1fe3f98709 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Tue, 16 Jul 2024 17:52:34 +0200
Subject: [PATCH 05/19] Don't depend on Phoenix.HTML.Form.label

---
 lib/bitstyles_phoenix/component/form.ex | 83 ++++++++++++++++++++++---
 1 file changed, 76 insertions(+), 7 deletions(-)

diff --git a/lib/bitstyles_phoenix/component/form.ex b/lib/bitstyles_phoenix/component/form.ex
index 36c6ab9..7bad17d 100644
--- a/lib/bitstyles_phoenix/component/form.ex
+++ b/lib/bitstyles_phoenix/component/form.ex
@@ -84,6 +84,24 @@ defmodule BitstylesPhoenix.Component.Form do
     '''
   )
 
+  story(
+    "Text field with custom id with label",
+    '''
+        iex> assigns=%{form: form()}
+        ...> render ~H"""
+        ...> <.ui_input form={@form} id={"the_name"} field={:name} />
+        ...> """
+    ''',
+    '''
+        """
+        <label for="the_name">
+          Name
+        </label>
+        <input id="the_name" maxlength="255" name="user[name]" type="text"/>
+        """
+    '''
+  )
+
   story(
     "Text required field with label",
     '''
@@ -243,7 +261,7 @@ defmodule BitstylesPhoenix.Component.Form do
   )
 
   story(
-    "Search field with placholder",
+    "Search field with placeholder",
     '''
         iex> assigns=%{form: form()}
         ...> render ~H"""
@@ -347,6 +365,9 @@ defmodule BitstylesPhoenix.Component.Form do
     '''
   )
 
+  # TODO: if exported Phoenix.HTML.FormField ... (v4)
+  # then id can be read from field.id
+
   def ui_input(assigns) do
     extra = assigns_to_attributes(assigns, @wrapper_assigns_keys ++ [:type])
 
@@ -651,7 +672,7 @@ defmodule BitstylesPhoenix.Component.Form do
   end
 
   defp wrapper_assigns(assigns) do
-    Map.take(assigns, @wrapper_assigns_keys ++ [:required])
+    Map.take(assigns, @wrapper_assigns_keys ++ [:required, :id])
   end
 
   @doc """
@@ -700,13 +721,16 @@ defmodule BitstylesPhoenix.Component.Form do
         classnames([label_opts[:class], {"u-sr-only", assigns[:hidden_label]}])
       )
 
-    assigns = assign(assigns, label_text: label_text, label_opts: label_opts)
+    assigns =
+      assigns
+      |> assign_new(:id, fn -> default_id(assigns.form, assigns.field) end)
+      |> assign(label_text: label_text, label_opts: label_opts)
 
     ~H"""
-    <%= PhxForm.label @form, @field, @label_opts do %>
+    <.label for={@id} {@label_opts} >
       <%= @label_text %>
       <.required_label {assigns_to_attributes(assigns)}/>
-    <% end %><%= render_slot(@inner_block) %>
+    </.label><%= render_slot(@inner_block) %>
     <.ui_errors form={@form} field={@field} />
     """
   end
@@ -742,19 +766,26 @@ defmodule BitstylesPhoenix.Component.Form do
   def ui_wrapped_input(assigns) do
     assigns =
       assigns
+      |> assign_new(:id, fn -> default_id(assigns.form, assigns.field) end)
       |> assign_new(:label, fn -> default_label(assigns.field) end)
       |> assign_new(:label_opts, fn -> [] end)
 
     ~H"""
-    <%= PhxForm.label @form, @field, @label_opts do %>
+    <.label for={@id} {@label_opts} >
       <%= render_slot(@inner_block) %>
       <%= @label %>
       <.required_label {assigns_to_attributes(assigns)} />
-    <% end %>
+    </.label>
     <.ui_errors form={@form} field={@field} />
     """
   end
 
+  defp default_id(form, field) when is_atom(field), do: default_id(form, Atom.to_string(field))
+
+  defp default_id(form, field) when is_binary(field) do
+    Phoenix.HTML.Form.input_id(form, field)
+  end
+
   defp default_label(field) when is_atom(field), do: default_label(Atom.to_string(field))
 
   defp default_label(field) when is_binary(field) do
@@ -790,4 +821,42 @@ defmodule BitstylesPhoenix.Component.Form do
     <span aria-hidden="true" class={classnames("u-fg-warning u-margin-xxs-left")}>*</span>
     """
   end
+
+  @doc """
+  Renders a label. Direct usage is discouraged in favor of `ui_input` that comes with a label.
+
+  ## Attributes
+
+  - `for` - id of the input the label belongs to.
+  """
+
+  story(
+    "Label",
+    '''
+        iex> assigns=%{}
+        ...> render ~H"""
+        ...> <.label for="user_address_city" class="foo bar">
+        ...>   City
+        ...> </.label>
+        ...> """
+    ''',
+    '''
+        """
+        <label class="foo bar" for="user_address_city">
+          City
+        </label>
+        """
+    '''
+  )
+
+  def label(assigns) do
+    extra = assigns_to_attributes(assigns, [:for])
+    assigns = assign(assigns, extra: extra)
+
+    ~H"""
+    <label {@extra} for={@for}>
+      <%= render_slot(@inner_block) %>
+    </label>
+    """
+  end
 end

From 6b8c535fba2df24a244f80c3faac48eaaf0bffb1 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Wed, 17 Jul 2024 12:56:43 +0200
Subject: [PATCH 06/19] Don't depend on Phoenix.HTML.Form.input

---
 lib/bitstyles_phoenix.ex                   |   2 +-
 lib/bitstyles_phoenix/component/form.ex    | 197 ++++++++++++++++-----
 lib/bitstyles_phoenix/component/sidebar.ex |   2 +-
 3 files changed, 150 insertions(+), 51 deletions(-)

diff --git a/lib/bitstyles_phoenix.ex b/lib/bitstyles_phoenix.ex
index ea62c15..9c677f9 100644
--- a/lib/bitstyles_phoenix.ex
+++ b/lib/bitstyles_phoenix.ex
@@ -59,7 +59,7 @@ defmodule BitstylesPhoenix do
 
   ### Translating error messages
 
-  Generated phoenix apps usally come with a helper for [translating error messages](https://github.com/phoenixframework/phoenix/blob/496123b66c03c9764be623d2c32b4af611837eb0/installer/templates/phx_web/views/error_helpers.ex#L23-L46)
+  Generated phoenix apps usually come with a helper for [translating error messages](https://github.com/phoenixframework/phoenix/blob/496123b66c03c9764be623d2c32b4af611837eb0/installer/templates/phx_web/views/error_helpers.ex#L23-L46)
   using `gettext`. This helper can be used to translate error messages rendered with `bitstyles_phoenix`.
 
   In order to do so you can configure the generated helper or write your own with the MFA configuration.
diff --git a/lib/bitstyles_phoenix/component/form.ex b/lib/bitstyles_phoenix/component/form.ex
index 7bad17d..c81c4d1 100644
--- a/lib/bitstyles_phoenix/component/form.ex
+++ b/lib/bitstyles_phoenix/component/form.ex
@@ -7,60 +7,48 @@ defmodule BitstylesPhoenix.Component.Form do
   @moduledoc """
   Components for rendering input elements.
 
+  Use `ui_input`, `ui_select`, `ui_textarea` to render the respective inputs together with a label and errors.
+  Alternatively, this module also provides `input` and `label` functions that can be used to render only an input or only a label.
+
   ## Common attributes
 
-  All helpers in this module accept the following attributes.
+  All `ui_*` components in this module accept the following attributes.
 
   - `form` *(required)* - The form to render the input form.
   - `field` *(required)* - The name of the field for the input.
   - `label` - The text to be used as label. Defaults to `Phoenix.HTML.Form.humanize/1`.
   - `label_opts` - The options passed to the label element generated with `Phoenix.HTML.Form.label/4`.
 
-  See `Phoenix.HTML.Form.form_for/4` or LiveView `form` component for details on how to render a form.
+  For details on how to render a form, see:
+  - `simple_form` core component in a freshly-generated Phoenix app, or
+  - `Phoenix.Component.form/1`, or
+  - `Phoenix.HTML.Form.form_for/4` if using phoenix_html v3 or phoenix_html_helpers
   """
 
-  @input_mapping %{
-    color: :color_input,
-    checkbox: :checkbox,
-    date: :date_input,
-    datetime_local: :datetime_local_input,
-    email: :email_input,
-    file: :file_input,
-    number: :number_input,
-    password: :password_input,
-    range: :range_input,
-    search: :search_input,
-    telephone: :telephone_input,
-    text: :text_input,
-    time: :time_input,
-    url: :url_input
-  }
-
   @wrapper_assigns_keys [:field, :form, :label, :label_opts, :hidden_label]
 
-  @type_doc_table @input_mapping
-                  |> Enum.map(fn {type, helper} ->
-                    "| `:#{type}` | `Phoenix.HTML.Form.#{helper}/3` |\n"
-                  end)
-
   @doc """
   Renders various types of `<input>` element, with the associated `<label>`s, and any errors for that field.
 
   ## Attributes
 
-  - `type` - The type of the input (see table below for available types). Defaults to `type="text"`.
+  - `type` - The type of the input. Defaults to `type="text"`.
   - `hidden_label` - Only show the label for screen readers if set to `true`.
   - All options from above (see top level module doc).
-  - All other attributes will be passed in as input options to the underlying input
-    helpers from `Phoenix.HTML.Form` (see table below for used helpers).
+  - All other attributes will be passed onto the input element as attributes.
     Defaults to `maxlength="255"` for `email`, `text` and `password` type.
     Set maxlength to `false` to prevent setting maxlength.
 
-  For reference which input helper is used check out the following mapping:
+  ## Types
+
+  This function accepts all HTML input types, considering that:
 
-  | type | Helper |
-  | :--: | ------ |
-  #{@type_doc_table}
+  * `type="checkbox"` is used exclusively to render boolean values
+  * For live file uploads, see `Phoenix.Component.live_file_input/1`
+
+  See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
+  for more information. Unsupported types, such as hidden and radio,
+  are best written directly in your templates.
 
   See the [bitstyles form docs](https://bitcrowd.github.io/bitstyles/?path=/docs/base-forms--fieldset) for examples of inputs, selects, textareas, labels etc. in use.
   See the [bitstyles form docs](https://bitcrowd.github.io/bitstyles/?path=/docs/ui-data-forms--login-form) for examples of form layouts.
@@ -79,7 +67,7 @@ defmodule BitstylesPhoenix.Component.Form do
         <label for="user_name">
           Name
         </label>
-        <input id="user_name" maxlength="255" name="user[name]" type="text"/>
+        <input id="user_name" name="user[name]" type="text" maxlength="255"/>
         """
     '''
   )
@@ -97,7 +85,7 @@ defmodule BitstylesPhoenix.Component.Form do
         <label for="the_name">
           Name
         </label>
-        <input id="the_name" maxlength="255" name="user[name]" type="text"/>
+        <input id="the_name" name="user[name]" type="text" maxlength="255"/>
         """
     '''
   )
@@ -118,7 +106,7 @@ defmodule BitstylesPhoenix.Component.Form do
             *
           </span>
         </label>
-        <input id="user_name" maxlength="255" name="user[name]" required="required" type="text"/>
+        <input id="user_name" name="user[name]" type="text" maxlength="255" required="required"/>
         """
     '''
   )
@@ -136,7 +124,7 @@ defmodule BitstylesPhoenix.Component.Form do
         <label for="user_name">
           Name
         </label>
-        <input id="user_name" maxlength="255" name="user[name]" type="text"/>
+        <input id="user_name" name="user[name]" type="text" maxlength="255"/>
         <span class="u-fg-warning" phx-feedback-for="user[name]">
           is too short
         </span>
@@ -157,7 +145,7 @@ defmodule BitstylesPhoenix.Component.Form do
         <label for="user_email">
           Email
         </label>
-        <input id="user_email" maxlength="255" name="user[email]" type="text"/>
+        <input id="user_email" name="user[email]" type="text" maxlength="255"/>
         <ul class=\"u-padding-xl-left\">
           <li>
             <span class=\"u-fg-warning\" phx-feedback-for=\"user[email]\">
@@ -187,7 +175,7 @@ defmodule BitstylesPhoenix.Component.Form do
         <label class="u-sr-only" for="user_name">
           Name
         </label>
-        <input id="user_name" maxlength="255" name="user[name]" type="text"/>
+        <input id="user_name" name="user[name]" type="text" maxlength="255"/>
         """
     '''
   )
@@ -237,7 +225,7 @@ defmodule BitstylesPhoenix.Component.Form do
             *
           </span>
         </label>
-        <input autocomplete="one-time-code" id="user_totp" inputmode="numeric" maxlength="6" name="user[totp]" pattern="[0-9]*" placeholder="6-digit code" required="required" type="text" value=""/>
+        <input id="user_totp" name="user[totp]" type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="6" pattern="[0-9]*" placeholder="6-digit code" required="required" value=""/>
         """
     '''
   )
@@ -255,7 +243,7 @@ defmodule BitstylesPhoenix.Component.Form do
         <label for="user_email">
           Email
         </label>
-        <input id="user_email" maxlength="255" name="user[email]" type="email"/>
+        <input id="user_email" name="user[email]" type="email" maxlength="255"/>
         """
     '''
   )
@@ -278,7 +266,7 @@ defmodule BitstylesPhoenix.Component.Form do
         <label for="user_email_or_name">
           Email or name
         </label>
-        <input autofocus="autofocus" id="user_email_or_name" name="user[email_or_name]" placeholder="Search by email or name" type="search"/>
+        <input id="user_email_or_name" name="user[email_or_name]" type="search" autofocus="autofocus" placeholder="Search by email or name"/>
         """
     '''
   )
@@ -299,7 +287,7 @@ defmodule BitstylesPhoenix.Component.Form do
           <label for="user_file">
             File
           </label>
-          <input accept="application/pdf" id="user_file" name="user[file]" type="file"/>
+          <input id="user_file" name="user[file]" type="file" accept="application/pdf"/>
         </form>
         """
     '''
@@ -336,7 +324,7 @@ defmodule BitstylesPhoenix.Component.Form do
         """
         <label for="user_accept">
           <input name="user[accept]" type="hidden" value="false"/>
-          <input id="user_accept" name="user[accept]" required="required" type="checkbox" value="true"/>
+          <input id="user_accept" name="user[accept]" type="checkbox" value="true" required="required"/>
           Accept
           <span aria-hidden="true" class="u-fg-warning u-margin-xxs-left">
             *
@@ -365,9 +353,6 @@ defmodule BitstylesPhoenix.Component.Form do
     '''
   )
 
-  # TODO: if exported Phoenix.HTML.FormField ... (v4)
-  # then id can be read from field.id
-
   def ui_input(assigns) do
     extra = assigns_to_attributes(assigns, @wrapper_assigns_keys ++ [:type])
 
@@ -391,11 +376,15 @@ defmodule BitstylesPhoenix.Component.Form do
   end
 
   defp render_input(type, form, field, opts) do
-    apply(PhxForm, input_type(type), [form, field, default_validations(opts, type)])
-  end
+    assigns = %{
+      type: type,
+      field: form[field],
+      extra: default_validations(opts, type)
+    }
 
-  defp input_type(type) do
-    Map.get(@input_mapping, type, :text_input)
+    ~H"""
+    <.input field={@field} type={@type} {@extra} />
+    """
   end
 
   defp default_validations(extra, type) when type in [:email, :text, :password] do
@@ -822,6 +811,116 @@ defmodule BitstylesPhoenix.Component.Form do
     """
   end
 
+  @doc """
+  Renders an input, select, or textarea.
+  Direct usage is discouraged in favor of `ui_input` that comes with a label and errors.
+
+  A `Phoenix.HTML.FormField` may be passed as argument,
+  which is used to retrieve the input name, id, and values.
+  Otherwise all attributes may be passed explicitly.
+
+  ## Types
+
+  This function accepts all HTML input types, considering that:
+
+  * You may also set `type="select"` to render a `<select>` tag
+  * `type="checkbox"` is used exclusively to render boolean values
+  * For live file uploads, see `Phoenix.Component.live_file_input/1`
+
+  See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
+  for more information. Unsupported types, such as hidden and radio,
+  are best written directly in your templates.
+
+  ## Attributes
+  - `field` - a `Phoenix.HTML.FormField` struct retrieved from the form, for example: @form[:email]
+  - `type` - string or atom, required
+  - `id` - string, required if `field` not passed
+  - `name` - string, required if `field` not passed
+  - `value` - any, required if `field` not passed
+  - any other attributes, they will be passed to the input element
+  """
+
+  def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
+    assigns
+    |> assign(field: nil)
+    |> assign_new(:id, fn -> field.id end)
+    |> assign_new(:name, fn -> if assigns[:multiple], do: field.name <> "[]", else: field.name end)
+    |> assign_new(:value, fn -> field.value end)
+    |> input()
+  end
+
+  def input(%{type: type} = assigns) when is_atom(type) do
+    input(%{assigns | type: Atom.to_string(type)})
+  end
+
+  def input(%{type: "checkbox"} = assigns) do
+    assigns =
+      assign_new(assigns, :checked, fn ->
+        Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value])
+      end)
+
+    extra = assigns_to_attributes(assigns, [:id, :name, :checked, :value, :type])
+    assigns = assign(assigns, extra: extra)
+
+    ~H"""
+    <input name={@name} type="hidden" value="false" disabled={@extra[:disabled]} />
+    <input
+      id={@id}
+      name={@name}
+      type="checkbox"
+      value="true"
+      checked={@checked}
+      {@extra}
+    />
+    """
+  end
+
+  def input(%{type: "select"} = assigns) do
+    extra = assigns_to_attributes(assigns, [:id, :name, :multiple, :prompt, :options, :value])
+    assigns = assign(assigns, extra: extra)
+
+    ~H"""
+    <select
+      id={@id}
+      name={@name}
+      multiple={@multiple}
+      {@extra}
+    >
+      <option :if={@prompt} value=""><%= @prompt %></option>
+      <%= Phoenix.HTML.Form.options_for_select(@options, @value) %>
+    </select>
+    """
+  end
+
+  def input(%{type: "textarea"} = assigns) do
+    extra = assigns_to_attributes(assigns, [:id, :name])
+    assigns = assign(assigns, extra: extra)
+
+    ~H"""
+    <textarea
+      id={@id}
+      name={@name}
+      {@extra}
+    ><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
+    """
+  end
+
+  # All other inputs text, datetime-local, url, password, etc. are handled here...
+  def input(assigns) do
+    extra = assigns_to_attributes(assigns, [:id, :name, :type, :value])
+    assigns = assign(assigns, extra: extra)
+
+    ~H"""
+    <input
+      id={@id}
+      name={@name}
+      type={@type}
+      {@extra}
+      value={Phoenix.HTML.Form.normalize_value(@type, @value)}
+    />
+    """
+  end
+
   @doc """
   Renders a label. Direct usage is discouraged in favor of `ui_input` that comes with a label.
 
diff --git a/lib/bitstyles_phoenix/component/sidebar.ex b/lib/bitstyles_phoenix/component/sidebar.ex
index fc21923..60fc435 100644
--- a/lib/bitstyles_phoenix/component/sidebar.ex
+++ b/lib/bitstyles_phoenix/component/sidebar.ex
@@ -154,7 +154,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
   since typically they host the logo/header/brand name, while the main navigation is hosted in the
   `sidebar_content` slot and shown on all screens. The reason for this separation is that the sidebar
   in the small screen is meant to start out hidden and only be shown when needed and therefore needs
-  control buttons to close it again (ususally at the top of the screen).
+  control buttons to close it again (usually at the top of the screen).
   If you have different requirements you can simply omit the `sidebar_content` block and render the
   shared content twice yourself.
 

From 3dc2cbb769569cd2a5814441ca61a67336357f9b Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Wed, 17 Jul 2024 13:14:18 +0200
Subject: [PATCH 07/19] Don't depend on Phoenix.HTML.Form.select

---
 lib/bitstyles_phoenix/component/form.ex | 37 +++++++++++++++----------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/lib/bitstyles_phoenix/component/form.ex b/lib/bitstyles_phoenix/component/form.ex
index c81c4d1..c903747 100644
--- a/lib/bitstyles_phoenix/component/form.ex
+++ b/lib/bitstyles_phoenix/component/form.ex
@@ -375,18 +375,6 @@ defmodule BitstylesPhoenix.Component.Form do
     """
   end
 
-  defp render_input(type, form, field, opts) do
-    assigns = %{
-      type: type,
-      field: form[field],
-      extra: default_validations(opts, type)
-    }
-
-    ~H"""
-    <.input field={@field} type={@type} {@extra} />
-    """
-  end
-
   defp default_validations(extra, type) when type in [:email, :text, :password] do
     Keyword.put_new(extra, :maxlength, 255)
   end
@@ -646,7 +634,12 @@ defmodule BitstylesPhoenix.Component.Form do
   )
 
   def ui_select(assigns) do
-    extra = assigns_to_attributes(assigns, @wrapper_assigns_keys ++ [:options])
+    assigns =
+      assigns
+      |> assign_new(:multiple, fn -> false end)
+      |> assign_new(:prompt, fn -> nil end)
+
+    extra = assigns_to_attributes(assigns, @wrapper_assigns_keys ++ [:type])
 
     assigns =
       assigns
@@ -655,11 +648,23 @@ defmodule BitstylesPhoenix.Component.Form do
 
     ~H"""
     <.ui_unwrapped_input {@wrapper}>
-      <%= PhxForm.select(@form, @field, @options, @extra) %>
+      <%= render_input(:select, @form, @field, @extra) %>
     </.ui_unwrapped_input>
     """
   end
 
+  defp render_input(type, form, field, opts) do
+    assigns = %{
+      type: type,
+      field: form[field],
+      extra: default_validations(opts, type)
+    }
+
+    ~H"""
+    <.input field={@field} type={@type} {@extra} />
+    """
+  end
+
   defp wrapper_assigns(assigns) do
     Map.take(assigns, @wrapper_assigns_keys ++ [:required, :id])
   end
@@ -876,7 +881,9 @@ defmodule BitstylesPhoenix.Component.Form do
   end
 
   def input(%{type: "select"} = assigns) do
-    extra = assigns_to_attributes(assigns, [:id, :name, :multiple, :prompt, :options, :value])
+    extra =
+      assigns_to_attributes(assigns, [:id, :name, :type, :multiple, :prompt, :options, :value])
+
     assigns = assign(assigns, extra: extra)
 
     ~H"""

From 7ee8b51e3db3faac1e3cf3c57f26a6d763cd7ad7 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Wed, 17 Jul 2024 13:15:44 +0200
Subject: [PATCH 08/19] Don't depend on Phoenix.HTML.Form.textarea

---
 lib/bitstyles_phoenix/component/form.ex | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/lib/bitstyles_phoenix/component/form.ex b/lib/bitstyles_phoenix/component/form.ex
index c903747..f6574bb 100644
--- a/lib/bitstyles_phoenix/component/form.ex
+++ b/lib/bitstyles_phoenix/component/form.ex
@@ -2,7 +2,6 @@ defmodule BitstylesPhoenix.Component.Form do
   use BitstylesPhoenix.Component
 
   import BitstylesPhoenix.Component.Error
-  alias Phoenix.HTML.Form, as: PhxForm
 
   @moduledoc """
   Components for rendering input elements.
@@ -503,7 +502,7 @@ defmodule BitstylesPhoenix.Component.Form do
   )
 
   def ui_textarea(assigns) do
-    extra = assigns_to_attributes(assigns, @wrapper_assigns_keys)
+    extra = assigns_to_attributes(assigns, @wrapper_assigns_keys ++ [:type])
 
     assigns =
       assigns
@@ -512,7 +511,7 @@ defmodule BitstylesPhoenix.Component.Form do
 
     ~H"""
     <.ui_unwrapped_input {@wrapper}>
-      <%= PhxForm.textarea(@form, @field, @extra) %>
+      <%= render_input(:textarea, @form, @field, @extra) %>
     </.ui_unwrapped_input>
     """
   end
@@ -900,7 +899,7 @@ defmodule BitstylesPhoenix.Component.Form do
   end
 
   def input(%{type: "textarea"} = assigns) do
-    extra = assigns_to_attributes(assigns, [:id, :name])
+    extra = assigns_to_attributes(assigns, [:id, :name, :type, :value])
     assigns = assign(assigns, extra: extra)
 
     ~H"""

From f884ff9f6ce6d8be5cc62af0a5d669fde1790e5e Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Wed, 17 Jul 2024 13:18:01 +0200
Subject: [PATCH 09/19] Fix credo warnings

---
 lib/bitstyles_phoenix/component/form.ex | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/lib/bitstyles_phoenix/component/form.ex b/lib/bitstyles_phoenix/component/form.ex
index f6574bb..c05350c 100644
--- a/lib/bitstyles_phoenix/component/form.ex
+++ b/lib/bitstyles_phoenix/component/form.ex
@@ -2,6 +2,7 @@ defmodule BitstylesPhoenix.Component.Form do
   use BitstylesPhoenix.Component
 
   import BitstylesPhoenix.Component.Error
+  alias Phoenix.HTML.Form, as: PhxForm
 
   @moduledoc """
   Components for rendering input elements.
@@ -776,7 +777,7 @@ defmodule BitstylesPhoenix.Component.Form do
   defp default_id(form, field) when is_atom(field), do: default_id(form, Atom.to_string(field))
 
   defp default_id(form, field) when is_binary(field) do
-    Phoenix.HTML.Form.input_id(form, field)
+    PhxForm.input_id(form, field)
   end
 
   defp default_label(field) when is_atom(field), do: default_label(Atom.to_string(field))
@@ -860,7 +861,7 @@ defmodule BitstylesPhoenix.Component.Form do
   def input(%{type: "checkbox"} = assigns) do
     assigns =
       assign_new(assigns, :checked, fn ->
-        Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value])
+        PhxForm.normalize_value("checkbox", assigns[:value])
       end)
 
     extra = assigns_to_attributes(assigns, [:id, :name, :checked, :value, :type])

From ff6b71925e9e81221590a370ebb3936dac6b8ec0 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Wed, 17 Jul 2024 13:43:41 +0200
Subject: [PATCH 10/19] Improve documentation

---
 lib/bitstyles_phoenix/component/form.ex | 116 ++++++++++++++++++++++--
 1 file changed, 110 insertions(+), 6 deletions(-)

diff --git a/lib/bitstyles_phoenix/component/form.ex b/lib/bitstyles_phoenix/component/form.ex
index c05350c..bf33313 100644
--- a/lib/bitstyles_phoenix/component/form.ex
+++ b/lib/bitstyles_phoenix/component/form.ex
@@ -16,8 +16,8 @@ defmodule BitstylesPhoenix.Component.Form do
 
   - `form` *(required)* - The form to render the input form.
   - `field` *(required)* - The name of the field for the input.
-  - `label` - The text to be used as label. Defaults to `Phoenix.HTML.Form.humanize/1`.
-  - `label_opts` - The options passed to the label element generated with `Phoenix.HTML.Form.label/4`.
+  - `label` - The text to be used as label. Defaults to a title-cased name of the field.
+  - `label_opts` - The options passed to the label element generated with `BitstylesPhoenix.Component.Form.label/1`.
 
   For details on how to render a form, see:
   - `simple_form` core component in a freshly-generated Phoenix app, or
@@ -35,7 +35,7 @@ defmodule BitstylesPhoenix.Component.Form do
   - `type` - The type of the input. Defaults to `type="text"`.
   - `hidden_label` - Only show the label for screen readers if set to `true`.
   - All options from above (see top level module doc).
-  - All other attributes will be passed onto the input element as attributes.
+  - All other attributes will be passed onto the input element.
     Defaults to `maxlength="255"` for `email`, `text` and `password` type.
     Set maxlength to `false` to prevent setting maxlength.
 
@@ -388,7 +388,7 @@ defmodule BitstylesPhoenix.Component.Form do
 
   - `hidden_label` - Only show the label for screen readers if set to `true`.
   - All options from above (see top level module doc).
-  - All other attributes will be passed in as input options to `Phoenix.HTML.Form.textarea/3`.
+  - All other attributes will be passed onto the input element.
 
   See the [bitstyles textarea docs](https://bitcrowd.github.io/bitstyles/?path=/docs/base-forms--textarea-and-label) for examples of textareas and labels in use.
   """
@@ -523,9 +523,10 @@ defmodule BitstylesPhoenix.Component.Form do
   ## Attributes
 
   - `hidden_label` - Only show the label for screen readers if set to `true`.
-  - `options` - The options passed to `Phoenix.HTML.Form.select/4`.
+  - `options` - The options passed to `Phoenix.HTML.Form.options_for_select/2`.
+  - `prompt` - Will be rendered as the first option with an empty value.
   - All options from above (see top level module doc).
-  - All other attributes will be passed in as input options to `Phoenix.HTML.Form.select/4`.
+  - All other attributes will be passed onto the input element.
 
   See the [bitstyles select docs](https://bitcrowd.github.io/bitstyles/?path=/docs/base-forms--select-and-label) for examples of textareas and labels in use.
   """
@@ -633,6 +634,34 @@ defmodule BitstylesPhoenix.Component.Form do
     '''
   )
 
+  story(
+    "Select box with prompt",
+    '''
+        iex> assigns=%{form: form()}
+        ...> render ~H"""
+        ...> <.ui_select form={@form} field={:week} options={1..2} prompt={"Choose a week number"}/>
+        ...> """
+    ''',
+    '''
+        """
+        <label for="user_week">
+          Week
+        </label>
+        <select id="user_week" name="user[week]">
+          <option value="">
+            Choose a week number
+          </option>
+          <option value="1">
+            1
+          </option>
+          <option value="2">
+            2
+          </option>
+        </select>
+        """
+    '''
+  )
+
   def ui_select(assigns) do
     assigns =
       assigns
@@ -842,9 +871,84 @@ defmodule BitstylesPhoenix.Component.Form do
   - `id` - string, required if `field` not passed
   - `name` - string, required if `field` not passed
   - `value` - any, required if `field` not passed
+  - `checked` - boolean, required if `type="checkbox"`
+  - `options` - list, required if `type="select"`
+  - `multiple` - boolean, required if `type="select"`
+  - `prompt` - string, required if `type="select"`
   - any other attributes, they will be passed to the input element
   """
 
+  story(
+    "Input (from field)",
+    '''
+        iex> assigns=%{form: form()}
+        ...> render ~H"""
+        ...> <.input field={@form[:name]} type="text"/>
+        ...> """
+    ''',
+    '''
+        """
+        <input id="user_name" name="user[name]" type="text"/>
+        """
+    '''
+  )
+
+  story(
+    "Input (email)",
+    '''
+        iex> assigns=%{}
+        ...> render ~H"""
+        ...> <.input id="the_email" name="user[email]" type={:email} value="" class="foo bar"/>
+        ...> """
+    ''',
+    '''
+        """
+        <input id="the_email" name="user[email]" type="email" class="foo bar" value=""/>
+        """
+    '''
+  )
+
+  story(
+    "Input (checkbox)",
+    '''
+        iex> assigns=%{}
+        ...> render ~H"""
+        ...> <.input id="the_newsletter" name="user[wants_newsletter]" type={:checkbox} checked={false} data-theme="pink"/>
+        ...> """
+    ''',
+    '''
+        """
+        <input name="user[wants_newsletter]" type="hidden" value="false"/>
+        <input id="the_newsletter" name="user[wants_newsletter]" type="checkbox" value="true" data-theme="pink"/>
+        """
+    '''
+  )
+
+  story(
+    "Input (select)",
+    '''
+        iex> assigns=%{}
+        ...> render ~H"""
+        ...> <.input id="the_day" name="user[dob_day]" type={:select} options={[{"Monday", 1},{"Tuesday", 2}]} value={2} multiple={false} prompt={"On which day were you born?"} data-foo=""/>
+        ...> """
+    ''',
+    '''
+        """
+        <select id="the_day" name="user[dob_day]" data-foo="">
+          <option value="">
+            On which day were you born?
+          </option>
+          <option value="1">
+            Monday
+          </option>
+          <option selected="selected" value="2">
+            Tuesday
+          </option>
+        </select>
+        """
+    '''
+  )
+
   def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
     assigns
     |> assign(field: nil)

From f84a456f5f6a3ed061464c27ac65c753dd51792b Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Wed, 17 Jul 2024 13:43:49 +0200
Subject: [PATCH 11/19] Define phoenix_html dependency

---
 mix.exs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/mix.exs b/mix.exs
index ce06faf..4da2706 100644
--- a/mix.exs
+++ b/mix.exs
@@ -53,6 +53,7 @@ defmodule BitstylesPhoenix.MixProject do
     [
       {:jason, "~> 1.0"},
       {:phoenix_live_view, "~>0.18.8 or ~> 0.19.0 or ~> 0.20.0"},
+      {:phoenix_html, "~> 3.3 or ~> 4.0"},
       {:floki, "~> 0.32.0", only: [:test, :dev]},
       {:ex_doc, ">= 0.0.0", only: :dev, runtime: false},
       {:credo, ">= 0.0.0", only: :dev, runtime: false}

From 9361e3226990de56e9cc59a03023779ee497c6ab Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Wed, 17 Jul 2024 14:00:32 +0200
Subject: [PATCH 12/19] Ensure Phoenix.Component.to_form is available

---
 mix.exs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/mix.exs b/mix.exs
index 4da2706..68f4459 100644
--- a/mix.exs
+++ b/mix.exs
@@ -52,7 +52,7 @@ defmodule BitstylesPhoenix.MixProject do
   defp deps do
     [
       {:jason, "~> 1.0"},
-      {:phoenix_live_view, "~>0.18.8 or ~> 0.19.0 or ~> 0.20.0"},
+      {:phoenix_live_view, "~> 0.18.12 or ~> 0.19.0 or ~> 0.20.0"},
       {:phoenix_html, "~> 3.3 or ~> 4.0"},
       {:floki, "~> 0.32.0", only: [:test, :dev]},
       {:ex_doc, ">= 0.0.0", only: :dev, runtime: false},

From 31522c6ffb5dc1f3de12c9f9d79df789a43359c3 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Wed, 17 Jul 2024 14:06:21 +0200
Subject: [PATCH 13/19] Documentation fixes

---
 .github/workflows/action.yml            | 1 -
 lib/bitstyles_phoenix/component/form.ex | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/action.yml b/.github/workflows/action.yml
index 945f775..00c85d8 100644
--- a/.github/workflows/action.yml
+++ b/.github/workflows/action.yml
@@ -18,7 +18,6 @@ jobs:
       - name: Check if versions showcase mix script finishes
         run: mix run scripts/generate_version_showcase.ex
 
-
   test-unlocked-deps:
     runs-on: ubuntu-latest
     name: unit (unlocked deps)
diff --git a/lib/bitstyles_phoenix/component/form.ex b/lib/bitstyles_phoenix/component/form.ex
index bf33313..9330664 100644
--- a/lib/bitstyles_phoenix/component/form.ex
+++ b/lib/bitstyles_phoenix/component/form.ex
@@ -388,7 +388,7 @@ defmodule BitstylesPhoenix.Component.Form do
 
   - `hidden_label` - Only show the label for screen readers if set to `true`.
   - All options from above (see top level module doc).
-  - All other attributes will be passed onto the input element.
+  - All other attributes will be passed onto the textarea element.
 
   See the [bitstyles textarea docs](https://bitcrowd.github.io/bitstyles/?path=/docs/base-forms--textarea-and-label) for examples of textareas and labels in use.
   """
@@ -526,9 +526,9 @@ defmodule BitstylesPhoenix.Component.Form do
   - `options` - The options passed to `Phoenix.HTML.Form.options_for_select/2`.
   - `prompt` - Will be rendered as the first option with an empty value.
   - All options from above (see top level module doc).
-  - All other attributes will be passed onto the input element.
+  - All other attributes will be passed onto the select element.
 
-  See the [bitstyles select docs](https://bitcrowd.github.io/bitstyles/?path=/docs/base-forms--select-and-label) for examples of textareas and labels in use.
+  See the [bitstyles select docs](https://bitcrowd.github.io/bitstyles/?path=/docs/base-forms--select-and-label) for examples of selects and labels in use.
   """
 
   story(

From c1f5c61a66d3ac3f87f650ec84b2279156c7e694 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Wed, 17 Jul 2024 14:11:47 +0200
Subject: [PATCH 14/19] Add changelog entry

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8542bad..d022a26 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- Added support for phoenix_html `v4`. You can also continue using phoenix_html `v3`.
 - Added support for bitstyles `v5.0.0`. You can continue using bitstyles_phoenix with a lower bitstyles version, or migrate your codebase to bitstyles `v5.0.0`.
 
 ### How to migrate to bitstyles `v5.0.0`

From 2cdd1566e5457ed15ecc95c11ceff9fe6f4d1036 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Wed, 17 Jul 2024 14:43:00 +0200
Subject: [PATCH 15/19] Copy over default values from core components

---
 lib/bitstyles_phoenix/component/form.ex | 59 +++++++++++++++++++------
 1 file changed, 45 insertions(+), 14 deletions(-)

diff --git a/lib/bitstyles_phoenix/component/form.ex b/lib/bitstyles_phoenix/component/form.ex
index 9330664..10635b0 100644
--- a/lib/bitstyles_phoenix/component/form.ex
+++ b/lib/bitstyles_phoenix/component/form.ex
@@ -172,7 +172,7 @@ defmodule BitstylesPhoenix.Component.Form do
     ''',
     '''
         """
-        <label class="u-sr-only" for="user_name">
+        <label for="user_name" class="u-sr-only">
           Name
         </label>
         <input id="user_name" name="user[name]" type="text" maxlength="255"/>
@@ -219,7 +219,7 @@ defmodule BitstylesPhoenix.Component.Form do
     ''',
     '''
         """
-        <label class="extra" for="user_totp">
+        <label for="user_totp" class="extra">
           Authentication code
           <span aria-hidden="true" class="u-fg-warning u-margin-xxs-left">
             *
@@ -344,7 +344,7 @@ defmodule BitstylesPhoenix.Component.Form do
     ''',
     '''
         """
-        <label class="extra" for="user_accept">
+        <label for="user_accept" class="extra">
           <input name="user[accept]" type="hidden" value="false"/>
           <input id="user_accept" name="user[accept]" type="checkbox" value="true"/>
           Accept
@@ -451,7 +451,7 @@ defmodule BitstylesPhoenix.Component.Form do
     ''',
     '''
         """
-        <label class="extra" for="user_metadata">
+        <label for="user_metadata" class="extra">
           Metadata
         </label>
         <textarea id="user_metadata" name="user[metadata]" rows="10">
@@ -471,7 +471,7 @@ defmodule BitstylesPhoenix.Component.Form do
     ''',
     '''
         """
-        <label class="u-sr-only" for="user_address">
+        <label for="user_address" class="u-sr-only">
           Address
         </label>
         <textarea id="user_address" name="user[address]">
@@ -594,7 +594,7 @@ defmodule BitstylesPhoenix.Component.Form do
     ''',
     '''
         """
-        <label class="u-sr-only" for="user_week">
+        <label for="user_week" class="u-sr-only">
           Week
         </label>
         <select id="user_week" name="user[week]">
@@ -619,7 +619,7 @@ defmodule BitstylesPhoenix.Component.Form do
     ''',
     '''
         """
-        <label class="extra" for="user_preference">
+        <label for="user_preference" class="extra">
           What do you like best?
         </label>
         <select id="user_preference" name="user[preference]">
@@ -867,14 +867,14 @@ defmodule BitstylesPhoenix.Component.Form do
 
   ## Attributes
   - `field` - a `Phoenix.HTML.FormField` struct retrieved from the form, for example: @form[:email]
-  - `type` - string or atom, required
+  - `type` - string or atom, defaults to :text
   - `id` - string, required if `field` not passed
   - `name` - string, required if `field` not passed
   - `value` - any, required if `field` not passed
   - `checked` - boolean, required if `type="checkbox"`
   - `options` - list, required if `type="select"`
-  - `multiple` - boolean, required if `type="select"`
-  - `prompt` - string, required if `type="select"`
+  - `multiple` - boolean, used if `type="select"`
+  - `prompt` - string, used if `type="select"`
   - any other attributes, they will be passed to the input element
   """
 
@@ -883,7 +883,7 @@ defmodule BitstylesPhoenix.Component.Form do
     '''
         iex> assigns=%{form: form()}
         ...> render ~H"""
-        ...> <.input field={@form[:name]} type="text"/>
+        ...> <.input field={@form[:name]} />
         ...> """
     ''',
     '''
@@ -929,7 +929,7 @@ defmodule BitstylesPhoenix.Component.Form do
     '''
         iex> assigns=%{}
         ...> render ~H"""
-        ...> <.input id="the_day" name="user[dob_day]" type={:select} options={[{"Monday", 1},{"Tuesday", 2}]} value={2} multiple={false} prompt={"On which day were you born?"} data-foo=""/>
+        ...> <.input id="the_day" name="user[dob_day]" type={:select} options={[{"Monday", 1},{"Tuesday", 2}]} value={2} prompt={"On which day were you born?"} data-foo=""/>
         ...> """
     ''',
     '''
@@ -953,6 +953,7 @@ defmodule BitstylesPhoenix.Component.Form do
     assigns
     |> assign(field: nil)
     |> assign_new(:id, fn -> field.id end)
+    |> assign_new(:type, fn -> :text end)
     |> assign_new(:name, fn -> if assigns[:multiple], do: field.name <> "[]", else: field.name end)
     |> assign_new(:value, fn -> field.value end)
     |> input()
@@ -985,6 +986,11 @@ defmodule BitstylesPhoenix.Component.Form do
   end
 
   def input(%{type: "select"} = assigns) do
+    assigns =
+      assigns
+      |> assign_new(:prompt, fn -> nil end)
+      |> assign_new(:multiple, fn -> false end)
+
     extra =
       assigns_to_attributes(assigns, [:id, :name, :type, :multiple, :prompt, :options, :value])
 
@@ -1052,19 +1058,44 @@ defmodule BitstylesPhoenix.Component.Form do
     ''',
     '''
         """
-        <label class="foo bar" for="user_address_city">
+        <label for="user_address_city" class="foo bar">
           City
         </label>
         """
     '''
   )
 
+  story(
+    "Label (no for)",
+    '''
+        iex> assigns=%{}
+        ...> render ~H"""
+        ...> <.label class="foo bar">
+        ...>   Note
+        ...>   <input type="text" name="note"/>
+        ...> </.label>
+        ...> """
+    ''',
+    '''
+        """
+        <label class="foo bar">
+          Note
+          <input type="text" name="note"/>
+        </label>
+        """
+    '''
+  )
+
   def label(assigns) do
+    assigns =
+      assigns
+      |> assign_new(:for, fn -> nil end)
+
     extra = assigns_to_attributes(assigns, [:for])
     assigns = assign(assigns, extra: extra)
 
     ~H"""
-    <label {@extra} for={@for}>
+    <label for={@for} {@extra}>
       <%= render_slot(@inner_block) %>
     </label>
     """

From aadd1c230d00c9d0528118a8947ebef64b3eeded Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Thu, 18 Jul 2024 09:32:38 +0200
Subject: [PATCH 16/19] Remove private render_input func

---
 lib/bitstyles_phoenix/component/form.ex | 34 +++++++++++--------------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/lib/bitstyles_phoenix/component/form.ex b/lib/bitstyles_phoenix/component/form.ex
index 10635b0..cbac42c 100644
--- a/lib/bitstyles_phoenix/component/form.ex
+++ b/lib/bitstyles_phoenix/component/form.ex
@@ -359,17 +359,20 @@ defmodule BitstylesPhoenix.Component.Form do
     assigns =
       assigns
       |> assign_new(:type, fn -> :text end)
-      |> assign(:extra, extra)
+
+    assigns =
+      assigns
+      |> assign(:extra, default_validations(extra, assigns.type))
       |> assign(:wrapper, wrapper_assigns(assigns))
 
     ~H"""
     <%= if @type == :checkbox do %>
       <.ui_wrapped_input {@wrapper}>
-        <%= render_input(:checkbox, @form, @field, @extra) %>
+        <.input field={@form[@field]} type={@type} {@extra} />
       </.ui_wrapped_input>
     <% else %>
       <.ui_unwrapped_input {@wrapper}>
-        <%= render_input(@type, @form, @field, @extra) %>
+        <.input field={@form[@field]} type={@type} {@extra} />
       </.ui_unwrapped_input>
     <% end %>
     """
@@ -503,16 +506,20 @@ defmodule BitstylesPhoenix.Component.Form do
   )
 
   def ui_textarea(assigns) do
+    assigns =
+      assigns
+      |> assign(:type, :textarea)
+
     extra = assigns_to_attributes(assigns, @wrapper_assigns_keys ++ [:type])
 
     assigns =
       assigns
-      |> assign(:extra, extra)
+      |> assign(:extra, default_validations(extra, assigns.type))
       |> assign(:wrapper, wrapper_assigns(assigns))
 
     ~H"""
     <.ui_unwrapped_input {@wrapper}>
-      <%= render_input(:textarea, @form, @field, @extra) %>
+      <.input field={@form[@field]} type={@type} {@extra} />
     </.ui_unwrapped_input>
     """
   end
@@ -667,33 +674,22 @@ defmodule BitstylesPhoenix.Component.Form do
       assigns
       |> assign_new(:multiple, fn -> false end)
       |> assign_new(:prompt, fn -> nil end)
+      |> assign(:type, :select)
 
     extra = assigns_to_attributes(assigns, @wrapper_assigns_keys ++ [:type])
 
     assigns =
       assigns
-      |> assign(:extra, extra)
+      |> assign(:extra, default_validations(extra, assigns.type))
       |> assign(:wrapper, wrapper_assigns(assigns))
 
     ~H"""
     <.ui_unwrapped_input {@wrapper}>
-      <%= render_input(:select, @form, @field, @extra) %>
+      <.input field={@form[@field]} type={:select} {@extra} />
     </.ui_unwrapped_input>
     """
   end
 
-  defp render_input(type, form, field, opts) do
-    assigns = %{
-      type: type,
-      field: form[field],
-      extra: default_validations(opts, type)
-    }
-
-    ~H"""
-    <.input field={@field} type={@type} {@extra} />
-    """
-  end
-
   defp wrapper_assigns(assigns) do
     Map.take(assigns, @wrapper_assigns_keys ++ [:required, :id])
   end

From 9f92878bbadd54f1e2928e7974d9b805fb51dc8e Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Thu, 18 Jul 2024 09:50:56 +0200
Subject: [PATCH 17/19] Use sigil_H instead of copy of content_tag

---
 lib/bitstyles_phoenix/showcase.ex | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/lib/bitstyles_phoenix/showcase.ex b/lib/bitstyles_phoenix/showcase.ex
index fc40916..39b8ac0 100644
--- a/lib/bitstyles_phoenix/showcase.ex
+++ b/lib/bitstyles_phoenix/showcase.ex
@@ -1,7 +1,8 @@
 defmodule BitstylesPhoenix.Showcase do
   @moduledoc false
 
-  import Phoenix.HTML, only: [safe_to_string: 1, attributes_escape: 1, html_escape: 1]
+  import Phoenix.Component, only: [sigil_H: 2]
+  alias Phoenix.HTML.Safe
 
   defmacro story(name, doctest_iex_code, doctest_expected_results, opts \\ []) do
     default_version = BitstylesPhoenix.Bitstyles.default_version() |> String.to_atom()
@@ -101,11 +102,17 @@ defmodule BitstylesPhoenix.Showcase do
       ]
       |> Keyword.merge(style_opts(opts))
 
+    assigns = %{iframe_opts: iframe_opts}
+
     if dist do
-      safe_to_string(content_tag(:iframe, "", iframe_opts))
+      ~H"""
+      <iframe {@iframe_opts} />
+      """
     else
-      ""
+      ~H""
     end
+    |> Safe.to_iodata()
+    |> IO.iodata_to_binary()
   end
 
   defp style_opts(opts) do
@@ -153,13 +160,4 @@ defmodule BitstylesPhoenix.Showcase do
       """
     end
   end
-
-  # copy-paste from phoenix_html_helpers because `content_tag` was removed in phoenix_html v4
-  # and we don't want to depend on phoenix_html_helpers
-  defp content_tag(name, content, attrs) when is_list(attrs) do
-    name = to_string(name)
-    {:safe, escaped} = html_escape(content)
-    sorted_attrs = attrs |> Enum.sort() |> attributes_escape() |> elem(1)
-    {:safe, [?<, name, sorted_attrs, ?>, escaped, ?<, ?/, name, ?>]}
-  end
 end

From 5b61a7660cd349ce68c1314221060bf6e19b4764 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Thu, 18 Jul 2024 14:44:27 +0200
Subject: [PATCH 18/19] Rename label and input to avoid name clashes

---
 lib/bitstyles_phoenix/component/form.ex | 50 ++++++++++++-------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/lib/bitstyles_phoenix/component/form.ex b/lib/bitstyles_phoenix/component/form.ex
index cbac42c..755be56 100644
--- a/lib/bitstyles_phoenix/component/form.ex
+++ b/lib/bitstyles_phoenix/component/form.ex
@@ -368,11 +368,11 @@ defmodule BitstylesPhoenix.Component.Form do
     ~H"""
     <%= if @type == :checkbox do %>
       <.ui_wrapped_input {@wrapper}>
-        <.input field={@form[@field]} type={@type} {@extra} />
+        <.ui_raw_input field={@form[@field]} type={@type} {@extra} />
       </.ui_wrapped_input>
     <% else %>
       <.ui_unwrapped_input {@wrapper}>
-        <.input field={@form[@field]} type={@type} {@extra} />
+        <.ui_raw_input field={@form[@field]} type={@type} {@extra} />
       </.ui_unwrapped_input>
     <% end %>
     """
@@ -519,7 +519,7 @@ defmodule BitstylesPhoenix.Component.Form do
 
     ~H"""
     <.ui_unwrapped_input {@wrapper}>
-      <.input field={@form[@field]} type={@type} {@extra} />
+      <.ui_raw_input field={@form[@field]} type={@type} {@extra} />
     </.ui_unwrapped_input>
     """
   end
@@ -685,7 +685,7 @@ defmodule BitstylesPhoenix.Component.Form do
 
     ~H"""
     <.ui_unwrapped_input {@wrapper}>
-      <.input field={@form[@field]} type={:select} {@extra} />
+      <.ui_raw_input field={@form[@field]} type={:select} {@extra} />
     </.ui_unwrapped_input>
     """
   end
@@ -746,10 +746,10 @@ defmodule BitstylesPhoenix.Component.Form do
       |> assign(label_text: label_text, label_opts: label_opts)
 
     ~H"""
-    <.label for={@id} {@label_opts} >
+    <.ui_raw_label for={@id} {@label_opts} >
       <%= @label_text %>
       <.required_label {assigns_to_attributes(assigns)}/>
-    </.label><%= render_slot(@inner_block) %>
+    </.ui_raw_label><%= render_slot(@inner_block) %>
     <.ui_errors form={@form} field={@field} />
     """
   end
@@ -790,11 +790,11 @@ defmodule BitstylesPhoenix.Component.Form do
       |> assign_new(:label_opts, fn -> [] end)
 
     ~H"""
-    <.label for={@id} {@label_opts} >
+    <.ui_raw_label for={@id} {@label_opts} >
       <%= render_slot(@inner_block) %>
       <%= @label %>
       <.required_label {assigns_to_attributes(assigns)} />
-    </.label>
+    </.ui_raw_label>
     <.ui_errors form={@form} field={@field} />
     """
   end
@@ -879,7 +879,7 @@ defmodule BitstylesPhoenix.Component.Form do
     '''
         iex> assigns=%{form: form()}
         ...> render ~H"""
-        ...> <.input field={@form[:name]} />
+        ...> <.ui_raw_input field={@form[:name]} />
         ...> """
     ''',
     '''
@@ -894,7 +894,7 @@ defmodule BitstylesPhoenix.Component.Form do
     '''
         iex> assigns=%{}
         ...> render ~H"""
-        ...> <.input id="the_email" name="user[email]" type={:email} value="" class="foo bar"/>
+        ...> <.ui_raw_input id="the_email" name="user[email]" type={:email} value="" class="foo bar"/>
         ...> """
     ''',
     '''
@@ -909,7 +909,7 @@ defmodule BitstylesPhoenix.Component.Form do
     '''
         iex> assigns=%{}
         ...> render ~H"""
-        ...> <.input id="the_newsletter" name="user[wants_newsletter]" type={:checkbox} checked={false} data-theme="pink"/>
+        ...> <.ui_raw_input id="the_newsletter" name="user[wants_newsletter]" type={:checkbox} checked={false} data-theme="pink"/>
         ...> """
     ''',
     '''
@@ -925,7 +925,7 @@ defmodule BitstylesPhoenix.Component.Form do
     '''
         iex> assigns=%{}
         ...> render ~H"""
-        ...> <.input id="the_day" name="user[dob_day]" type={:select} options={[{"Monday", 1},{"Tuesday", 2}]} value={2} prompt={"On which day were you born?"} data-foo=""/>
+        ...> <.ui_raw_input id="the_day" name="user[dob_day]" type={:select} options={[{"Monday", 1},{"Tuesday", 2}]} value={2} prompt={"On which day were you born?"} data-foo=""/>
         ...> """
     ''',
     '''
@@ -945,21 +945,21 @@ defmodule BitstylesPhoenix.Component.Form do
     '''
   )
 
-  def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
+  def ui_raw_input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
     assigns
     |> assign(field: nil)
     |> assign_new(:id, fn -> field.id end)
     |> assign_new(:type, fn -> :text end)
     |> assign_new(:name, fn -> if assigns[:multiple], do: field.name <> "[]", else: field.name end)
     |> assign_new(:value, fn -> field.value end)
-    |> input()
+    |> ui_raw_input()
   end
 
-  def input(%{type: type} = assigns) when is_atom(type) do
-    input(%{assigns | type: Atom.to_string(type)})
+  def ui_raw_input(%{type: type} = assigns) when is_atom(type) do
+    ui_raw_input(%{assigns | type: Atom.to_string(type)})
   end
 
-  def input(%{type: "checkbox"} = assigns) do
+  def ui_raw_input(%{type: "checkbox"} = assigns) do
     assigns =
       assign_new(assigns, :checked, fn ->
         PhxForm.normalize_value("checkbox", assigns[:value])
@@ -981,7 +981,7 @@ defmodule BitstylesPhoenix.Component.Form do
     """
   end
 
-  def input(%{type: "select"} = assigns) do
+  def ui_raw_input(%{type: "select"} = assigns) do
     assigns =
       assigns
       |> assign_new(:prompt, fn -> nil end)
@@ -1005,7 +1005,7 @@ defmodule BitstylesPhoenix.Component.Form do
     """
   end
 
-  def input(%{type: "textarea"} = assigns) do
+  def ui_raw_input(%{type: "textarea"} = assigns) do
     extra = assigns_to_attributes(assigns, [:id, :name, :type, :value])
     assigns = assign(assigns, extra: extra)
 
@@ -1019,7 +1019,7 @@ defmodule BitstylesPhoenix.Component.Form do
   end
 
   # All other inputs text, datetime-local, url, password, etc. are handled here...
-  def input(assigns) do
+  def ui_raw_input(assigns) do
     extra = assigns_to_attributes(assigns, [:id, :name, :type, :value])
     assigns = assign(assigns, extra: extra)
 
@@ -1047,9 +1047,9 @@ defmodule BitstylesPhoenix.Component.Form do
     '''
         iex> assigns=%{}
         ...> render ~H"""
-        ...> <.label for="user_address_city" class="foo bar">
+        ...> <.ui_raw_label for="user_address_city" class="foo bar">
         ...>   City
-        ...> </.label>
+        ...> </.ui_raw_label>
         ...> """
     ''',
     '''
@@ -1066,10 +1066,10 @@ defmodule BitstylesPhoenix.Component.Form do
     '''
         iex> assigns=%{}
         ...> render ~H"""
-        ...> <.label class="foo bar">
+        ...> <.ui_raw_label class="foo bar">
         ...>   Note
         ...>   <input type="text" name="note"/>
-        ...> </.label>
+        ...> </.ui_raw_label>
         ...> """
     ''',
     '''
@@ -1082,7 +1082,7 @@ defmodule BitstylesPhoenix.Component.Form do
     '''
   )
 
-  def label(assigns) do
+  def ui_raw_label(assigns) do
     assigns =
       assigns
       |> assign_new(:for, fn -> nil end)

From ca1ec046c77efb6d5c05856eadcb80e988e89afb Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelika@bitcrowd.net>
Date: Thu, 18 Jul 2024 14:58:29 +0200
Subject: [PATCH 19/19] Update changelog

---
 CHANGELOG.md                            | 2 +-
 lib/bitstyles_phoenix/component/form.ex | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d022a26..0d029f7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 ## Unreleased
 
-- Added support for phoenix_html `v4`. You can also continue using phoenix_html `v3`.
+- Added support for phoenix_html `v4`. You can also continue using phoenix_html `v3`. To replace `Phoenix.HTML.Form` input helpers removed in phoenix_html `v4`, new components `ui_raw_input` and `ui_raw_label` were added.
 - Added support for bitstyles `v5.0.0`. You can continue using bitstyles_phoenix with a lower bitstyles version, or migrate your codebase to bitstyles `v5.0.0`.
 
 ### How to migrate to bitstyles `v5.0.0`
diff --git a/lib/bitstyles_phoenix/component/form.ex b/lib/bitstyles_phoenix/component/form.ex
index 755be56..cbfd34e 100644
--- a/lib/bitstyles_phoenix/component/form.ex
+++ b/lib/bitstyles_phoenix/component/form.ex
@@ -843,7 +843,7 @@ defmodule BitstylesPhoenix.Component.Form do
 
   @doc """
   Renders an input, select, or textarea.
-  Direct usage is discouraged in favor of `ui_input` that comes with a label and errors.
+  Direct usage is discouraged. Use `ui_input` instead that comes with a label and errors.
 
   A `Phoenix.HTML.FormField` may be passed as argument,
   which is used to retrieve the input name, id, and values.