From 27930ddf292a31d33e0eae93ff2e696541a7d90f Mon Sep 17 00:00:00 2001
From: Francis Secada <francis.secada@gmail.com>
Date: Sat, 25 Apr 2026 19:42:55 -0400
Subject: [PATCH 1/6] feat: add input_class and control_class props to form
 components

FormField, Select, Textarea now accept input_class (appended to the
main input element's class string). CheckboxGroup accepts control_class
(appended to the wrapping <div class="control">).

Both Jinja2 and Cotton template sets updated. Existing tests updated to
pass empty defaults; new tests verify prop applied to correct element and
default renders without extra class.

Closes #1
---
 .../cotton/bulma/cf/checkbox-group.html       |   4 +-
 .../templates/cotton/bulma/cf/form-field.html |   4 +-
 .../templates/cotton/bulma/cf/select.html     |   4 +-
 .../templates/cotton/bulma/cf/textarea.html   |   4 +-
 .../templates/jinja/bulma/CheckboxGroup.jinja |   4 +-
 .../templates/jinja/bulma/FormField.jinja     |   4 +-
 src/cf_ui/templates/jinja/bulma/Select.jinja  |   4 +-
 .../templates/jinja/bulma/Textarea.jinja      |   4 +-
 tests/unit/cotton/test_forms.py               |  70 +++++++++
 tests/unit/jinja/test_forms.py                | 135 ++++++++++++++++++
 10 files changed, 221 insertions(+), 16 deletions(-)

diff --git a/src/cf_ui/templates/cotton/bulma/cf/checkbox-group.html b/src/cf_ui/templates/cotton/bulma/cf/checkbox-group.html
index 8b9f0f1..4725c12 100644
--- a/src/cf_ui/templates/cotton/bulma/cf/checkbox-group.html
+++ b/src/cf_ui/templates/cotton/bulma/cf/checkbox-group.html
@@ -1,7 +1,7 @@
-<c-vars name label error="" choices="[]" selected="[]" class="" />
+<c-vars name label error="" choices="[]" selected="[]" control_class="" class="" />
 <div class="field {{ class }}">
   <label class="label">{{ label }}</label>
-  <div class="control">
+  <div class="control{% if control_class %} {{ control_class }}{% endif %}">
     {% for choice in choices %}
     <label class="checkbox mr-3">
       <input type="checkbox"
diff --git a/src/cf_ui/templates/cotton/bulma/cf/form-field.html b/src/cf_ui/templates/cotton/bulma/cf/form-field.html
index 71e5777..e5622a5 100644
--- a/src/cf_ui/templates/cotton/bulma/cf/form-field.html
+++ b/src/cf_ui/templates/cotton/bulma/cf/form-field.html
@@ -1,8 +1,8 @@
-<c-vars name label value="" error="" type="text" required="false" class="" />
+<c-vars name label value="" error="" type="text" required="false" input_class="" class="" />
 <div class="field {{ class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
-    <input class="input{% if error %} is-danger{% endif %}"
+    <input class="input{% if error %} is-danger{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
            id="{{ name }}"
            type="{{ type }}"
            name="{{ name }}"
diff --git a/src/cf_ui/templates/cotton/bulma/cf/select.html b/src/cf_ui/templates/cotton/bulma/cf/select.html
index 22b9905..072dcf6 100644
--- a/src/cf_ui/templates/cotton/bulma/cf/select.html
+++ b/src/cf_ui/templates/cotton/bulma/cf/select.html
@@ -1,9 +1,9 @@
-<c-vars name label value="" error="" options="[]" class="" />
+<c-vars name label value="" error="" options="[]" input_class="" class="" />
 <div class="field {{ class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
     <div class="select{% if error %} is-danger{% endif %} is-fullwidth">
-      <select id="{{ name }}" name="{{ name }}">
+      <select id="{{ name }}" name="{{ name }}"{% if input_class %} class="{{ input_class }}"{% endif %}>
         {% for opt in options %}
         <option value="{{ opt.value }}"{% if opt.value|stringformat:"s" == value|stringformat:"s" %} selected{% endif %}>
           {{ opt.label }}
diff --git a/src/cf_ui/templates/cotton/bulma/cf/textarea.html b/src/cf_ui/templates/cotton/bulma/cf/textarea.html
index d233976..6ff1a11 100644
--- a/src/cf_ui/templates/cotton/bulma/cf/textarea.html
+++ b/src/cf_ui/templates/cotton/bulma/cf/textarea.html
@@ -1,8 +1,8 @@
-<c-vars name label value="" error="" rows="4" class="" />
+<c-vars name label value="" error="" rows="4" input_class="" class="" />
 <div class="field {{ class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
-    <textarea class="textarea{% if error %} is-danger{% endif %}"
+    <textarea class="textarea{% if error %} is-danger{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
               id="{{ name }}"
               name="{{ name }}"
               rows="{{ rows }}">{{ value }}</textarea>
diff --git a/src/cf_ui/templates/jinja/bulma/CheckboxGroup.jinja b/src/cf_ui/templates/jinja/bulma/CheckboxGroup.jinja
index c8316fb..ba1a7f1 100644
--- a/src/cf_ui/templates/jinja/bulma/CheckboxGroup.jinja
+++ b/src/cf_ui/templates/jinja/bulma/CheckboxGroup.jinja
@@ -1,7 +1,7 @@
-{#def name, label, choices=[], selected=[], error="", extra_class="" #}
+{#def name, label, choices=[], selected=[], error="", extra_class="", control_class="" #}
 <div class="field {{ extra_class }}">
   <label class="label">{{ label }}</label>
-  <div class="control">
+  <div class="control{% if control_class %} {{ control_class }}{% endif %}">
     {% for choice in choices %}
     <label class="checkbox mr-3">
       <input type="checkbox"
diff --git a/src/cf_ui/templates/jinja/bulma/FormField.jinja b/src/cf_ui/templates/jinja/bulma/FormField.jinja
index 76fb54a..9dbe51e 100644
--- a/src/cf_ui/templates/jinja/bulma/FormField.jinja
+++ b/src/cf_ui/templates/jinja/bulma/FormField.jinja
@@ -1,8 +1,8 @@
-{#def name, label, value="", error="", type="text", required=false, extra_class="" #}
+{#def name, label, value="", error="", type="text", required=false, extra_class="", input_class="" #}
 <div class="field {{ extra_class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
-    <input class="input{% if error %} is-danger{% endif %}"
+    <input class="input{% if error %} is-danger{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
            id="{{ name }}"
            type="{{ type }}"
            name="{{ name }}"
diff --git a/src/cf_ui/templates/jinja/bulma/Select.jinja b/src/cf_ui/templates/jinja/bulma/Select.jinja
index 73d6949..a5842d6 100644
--- a/src/cf_ui/templates/jinja/bulma/Select.jinja
+++ b/src/cf_ui/templates/jinja/bulma/Select.jinja
@@ -1,9 +1,9 @@
-{#def name, label, value="", error="", options=[], extra_class="" #}
+{#def name, label, value="", error="", options=[], extra_class="", input_class="" #}
 <div class="field {{ extra_class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
     <div class="select{% if error %} is-danger{% endif %} is-fullwidth">
-      <select id="{{ name }}" name="{{ name }}">
+      <select id="{{ name }}" name="{{ name }}"{% if input_class %} class="{{ input_class }}"{% endif %}>
         {% for opt in options %}
         <option value="{{ opt.value }}"{% if opt.value|string == value|string %} selected{% endif %}>
           {{ opt.label }}
diff --git a/src/cf_ui/templates/jinja/bulma/Textarea.jinja b/src/cf_ui/templates/jinja/bulma/Textarea.jinja
index 9a1254b..f49bfe2 100644
--- a/src/cf_ui/templates/jinja/bulma/Textarea.jinja
+++ b/src/cf_ui/templates/jinja/bulma/Textarea.jinja
@@ -1,8 +1,8 @@
-{#def name, label, value="", error="", rows=4, extra_class="" #}
+{#def name, label, value="", error="", rows=4, extra_class="", input_class="" #}
 <div class="field {{ extra_class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
-    <textarea class="textarea{% if error %} is-danger{% endif %}"
+    <textarea class="textarea{% if error %} is-danger{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
               id="{{ name }}"
               name="{{ name }}"
               rows="{{ rows }}">{{ value }}</textarea>
diff --git a/tests/unit/cotton/test_forms.py b/tests/unit/cotton/test_forms.py
index cebe370..fb2dee4 100644
--- a/tests/unit/cotton/test_forms.py
+++ b/tests/unit/cotton/test_forms.py
@@ -72,3 +72,73 @@ def test_checkbox_group_cotton_renders_choices(cotton_render):
     )
     assert "Apple" in html
     assert "checked" in html
+
+
+# ── Granular class prop tests ────────────────────────────────────────────────
+
+
+def test_form_field_cotton_input_class_applied(cotton_render):
+    html = cotton_render(
+        "cf/form-field.html",
+        name="email",
+        label="Email",
+        value="",
+        error="",
+        type="text",
+        required="false",
+        input_class="is-rounded",
+    )
+    assert "is-rounded" in html
+
+
+def test_form_field_cotton_input_class_default_omitted(cotton_render):
+    html = cotton_render(
+        "cf/form-field.html",
+        name="email",
+        label="Email",
+        value="",
+        error="",
+        type="text",
+        required="false",
+        input_class="",
+    )
+    assert "is-rounded" not in html
+
+
+def test_select_cotton_input_class_applied(cotton_render):
+    html = cotton_render(
+        "cf/select.html",
+        name="choice",
+        label="Choose",
+        value="",
+        error="",
+        options=[],
+        input_class="my-select",
+    )
+    assert "my-select" in html
+
+
+def test_textarea_cotton_input_class_applied(cotton_render):
+    html = cotton_render(
+        "cf/textarea.html",
+        name="bio",
+        label="Bio",
+        value="",
+        error="",
+        rows="4",
+        input_class="has-fixed-size",
+    )
+    assert "has-fixed-size" in html
+
+
+def test_checkbox_group_cotton_control_class_applied(cotton_render):
+    html = cotton_render(
+        "cf/checkbox-group.html",
+        name="fruits",
+        label="Fruits",
+        choices=[{"value": "a", "label": "Apple"}],
+        selected=[],
+        error="",
+        control_class="is-flex",
+    )
+    assert "is-flex" in html
diff --git a/tests/unit/jinja/test_forms.py b/tests/unit/jinja/test_forms.py
index 3aa4421..5ed8cf4 100644
--- a/tests/unit/jinja/test_forms.py
+++ b/tests/unit/jinja/test_forms.py
@@ -8,6 +8,7 @@ def test_form_field_renders_label(render):
         type="text",
         required=False,
         extra_class="",
+        input_class="",
     )
     assert "Email Address" in html
     assert '<label class="label"' in html
@@ -23,6 +24,7 @@ def test_form_field_renders_input(render):
         type="email",
         required=False,
         extra_class="",
+        input_class="",
     )
     assert 'name="email"' in html
     assert 'type="email"' in html
@@ -39,6 +41,7 @@ def test_form_field_shows_error(render):
         type="text",
         required=False,
         extra_class="",
+        input_class="",
     )
     assert "This field is required." in html
     assert "is-danger" in html
@@ -55,6 +58,7 @@ def test_form_field_no_error_omits_danger(render):
         type="text",
         required=False,
         extra_class="",
+        input_class="",
     )
     assert "is-danger" not in html
 
@@ -69,6 +73,7 @@ def test_form_field_required_attribute(render):
         type="text",
         required=True,
         extra_class="",
+        input_class="",
     )
     assert "required" in html
 
@@ -83,6 +88,7 @@ def test_select_renders_options(render):
         error="",
         options=options,
         extra_class="",
+        input_class="",
     )
     assert "Option A" in html
     assert "Option B" in html
@@ -99,6 +105,7 @@ def test_select_shows_error(render):
         error="Required",
         options=[],
         extra_class="",
+        input_class="",
     )
     assert "Required" in html
     assert "is-danger" in html
@@ -113,6 +120,7 @@ def test_textarea_renders_value(render):
         error="",
         rows=4,
         extra_class="",
+        input_class="",
     )
     assert "Hello world" in html
     assert 'name="bio"' in html
@@ -128,6 +136,7 @@ def test_textarea_shows_error(render):
         error="Too short",
         rows=4,
         extra_class="",
+        input_class="",
     )
     assert "Too short" in html
     assert "is-danger" in html
@@ -143,6 +152,7 @@ def test_checkbox_group_renders_choices(render):
         selected=["a"],
         error="",
         extra_class="",
+        control_class="",
     )
     assert "Apple" in html
     assert "Banana" in html
@@ -160,6 +170,7 @@ def test_checkbox_group_unchecked_item(render):
         selected=["a"],
         error="",
         extra_class="",
+        control_class="",
     )
     assert html.count("checked") == 1
 
@@ -173,6 +184,130 @@ def test_checkbox_group_shows_error(render):
         selected=[],
         error="Select at least one",
         extra_class="",
+        control_class="",
     )
     assert "Select at least one" in html
     assert "is-danger" in html
+
+
+# ── Granular class prop tests ────────────────────────────────────────────────
+
+
+def test_form_field_input_class_applied(render):
+    html = render(
+        "FormField.jinja",
+        name="email",
+        label="Email",
+        value="",
+        error="",
+        type="text",
+        required=False,
+        extra_class="",
+        input_class="is-rounded",
+    )
+    assert "is-rounded" in html
+    assert 'class="input is-rounded"' in html
+
+
+def test_form_field_input_class_default_omitted(render):
+    html = render(
+        "FormField.jinja",
+        name="email",
+        label="Email",
+        value="",
+        error="",
+        type="text",
+        required=False,
+        extra_class="",
+        input_class="",
+    )
+    assert 'class="input"' in html
+
+
+def test_select_input_class_applied(render):
+    html = render(
+        "Select.jinja",
+        name="choice",
+        label="Choose",
+        value="",
+        error="",
+        options=[],
+        extra_class="",
+        input_class="my-select",
+    )
+    assert 'class="my-select"' in html
+
+
+def test_select_input_class_default_omitted(render):
+    html = render(
+        "Select.jinja",
+        name="choice",
+        label="Choose",
+        value="",
+        error="",
+        options=[],
+        extra_class="",
+        input_class="",
+    )
+    # No class attribute on the bare <select> when input_class is empty
+    assert "<select " not in html or 'class=""' not in html
+
+
+def test_textarea_input_class_applied(render):
+    html = render(
+        "Textarea.jinja",
+        name="bio",
+        label="Bio",
+        value="",
+        error="",
+        rows=4,
+        extra_class="",
+        input_class="has-fixed-size",
+    )
+    assert "has-fixed-size" in html
+    assert 'class="textarea has-fixed-size"' in html
+
+
+def test_textarea_input_class_default_omitted(render):
+    html = render(
+        "Textarea.jinja",
+        name="bio",
+        label="Bio",
+        value="",
+        error="",
+        rows=4,
+        extra_class="",
+        input_class="",
+    )
+    assert 'class="textarea"' in html
+
+
+def test_checkbox_group_control_class_applied(render):
+    choices = [{"value": "a", "label": "Apple"}]
+    html = render(
+        "CheckboxGroup.jinja",
+        name="fruits",
+        label="Fruits",
+        choices=choices,
+        selected=[],
+        error="",
+        extra_class="",
+        control_class="is-flex",
+    )
+    assert "is-flex" in html
+    assert 'class="control is-flex"' in html
+
+
+def test_checkbox_group_control_class_default_omitted(render):
+    choices = [{"value": "a", "label": "Apple"}]
+    html = render(
+        "CheckboxGroup.jinja",
+        name="fruits",
+        label="Fruits",
+        choices=choices,
+        selected=[],
+        error="",
+        extra_class="",
+        control_class="",
+    )
+    assert 'class="control"' in html

From ac216ef75dafa0a5391bdf7047cef4b79ceee07d Mon Sep 17 00:00:00 2001
From: Francis Secada <francis.secada@gmail.com>
Date: Sat, 25 Apr 2026 19:46:26 -0400
Subject: [PATCH 2/6] =?UTF-8?q?fix:=20CI=20=E2=80=94=20use=20setup-uv=20py?=
 =?UTF-8?q?thon-version=20and=20--system=20flag=20for=20uv=20pip=20install?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/ci.yml | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index afb861e..d7908a3 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -18,12 +18,11 @@ jobs:
 
       - name: Install uv
         uses: astral-sh/setup-uv@v3
-
-      - name: Set up Python ${{ matrix.python-version }}
-        run: uv python install ${{ matrix.python-version }}
+        with:
+          python-version: ${{ matrix.python-version }}
 
       - name: Install dependencies
-        run: uv pip install -e ".[dev]"
+        run: uv pip install --system -e ".[dev]"
 
       - name: Install Playwright browsers
         run: playwright install chromium --with-deps

From 1d3f2c5d3df2585c962c2c9a9282962670f77de3 Mon Sep 17 00:00:00 2001
From: Francis Secada <francis.secada@gmail.com>
Date: Sat, 25 Apr 2026 19:47:41 -0400
Subject: [PATCH 3/6] =?UTF-8?q?fix:=20CI=20=E2=80=94=20create=20venv=20wit?=
 =?UTF-8?q?h=20uv=20venv=20and=20use=20uv=20run=20prefix=20for=20all=20com?=
 =?UTF-8?q?mands?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/ci.yml | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index d7908a3..7f0fb86 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -22,22 +22,24 @@ jobs:
           python-version: ${{ matrix.python-version }}
 
       - name: Install dependencies
-        run: uv pip install --system -e ".[dev]"
+        run: |
+          uv venv
+          uv pip install -e ".[dev]"
 
       - name: Install Playwright browsers
-        run: playwright install chromium --with-deps
+        run: uv run playwright install chromium --with-deps
 
       - name: Lint
-        run: ruff check src tests
+        run: uv run ruff check src tests
 
       - name: Format check
-        run: ruff format --check src tests
+        run: uv run ruff format --check src tests
 
       - name: Unit tests
-        run: pytest tests/unit/ -q --tb=short
+        run: uv run pytest tests/unit/ -q --tb=short
 
       - name: Integration tests
-        run: pytest tests/integration/ -q --tb=short
+        run: uv run pytest tests/integration/ -q --tb=short
 
       - name: E2E tests
-        run: pytest tests/e2e/ -q --tb=short --browser chromium
+        run: uv run pytest tests/e2e/ -q --tb=short --browser chromium

From ed3952c23b93f93e38b21cb2c4bf458751ccdd01 Mon Sep 17 00:00:00 2001
From: Francis Secada <francis.secada@gmail.com>
Date: Sat, 25 Apr 2026 19:48:36 -0400
Subject: [PATCH 4/6] =?UTF-8?q?fix:=20CI=20=E2=80=94=20pre-install=20compo?=
 =?UTF-8?q?nent-framework=20from=20GitHub=20(not=20yet=20on=20PyPI)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/ci.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 7f0fb86..e8dd770 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -24,6 +24,7 @@ jobs:
       - name: Install dependencies
         run: |
           uv venv
+          uv pip install "git+https://github.com/fsecada01/component-framework.git"
           uv pip install -e ".[dev]"
 
       - name: Install Playwright browsers

From bcf3e2ee926dae4d6011d54eac1736ef7126b913 Mon Sep 17 00:00:00 2001
From: Francis Secada <francis.secada@gmail.com>
Date: Sat, 25 Apr 2026 19:49:40 -0400
Subject: [PATCH 5/6] =?UTF-8?q?fix:=20CI=20=E2=80=94=20uv.sources=20for=20?=
 =?UTF-8?q?component-framework=20git=20dep,=20activate=20venv=20via=20GITH?=
 =?UTF-8?q?UB=5FPATH?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/ci.yml | 14 +++++++-------
 pyproject.toml           |  3 +++
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index e8dd770..c39d986 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -24,23 +24,23 @@ jobs:
       - name: Install dependencies
         run: |
           uv venv
-          uv pip install "git+https://github.com/fsecada01/component-framework.git"
           uv pip install -e ".[dev]"
+          echo "$GITHUB_WORKSPACE/.venv/bin" >> $GITHUB_PATH
 
       - name: Install Playwright browsers
-        run: uv run playwright install chromium --with-deps
+        run: playwright install chromium --with-deps
 
       - name: Lint
-        run: uv run ruff check src tests
+        run: ruff check src tests
 
       - name: Format check
-        run: uv run ruff format --check src tests
+        run: ruff format --check src tests
 
       - name: Unit tests
-        run: uv run pytest tests/unit/ -q --tb=short
+        run: pytest tests/unit/ -q --tb=short
 
       - name: Integration tests
-        run: uv run pytest tests/integration/ -q --tb=short
+        run: pytest tests/integration/ -q --tb=short
 
       - name: E2E tests
-        run: uv run pytest tests/e2e/ -q --tb=short --browser chromium
+        run: pytest tests/e2e/ -q --tb=short --browser chromium
diff --git a/pyproject.toml b/pyproject.toml
index c1fcf9b..b85ce0d 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -70,6 +70,9 @@ testpaths = ["tests"]
 pythonpath = ["src"]
 asyncio_mode = "auto"
 
+[tool.uv.sources]
+component-framework = { git = "https://github.com/fsecada01/component-framework.git" }
+
 [tool.ruff]
 line-length = 100
 target-version = "py311"

From cefb3a0f6d6d200df88598f881499db059d946a5 Mon Sep 17 00:00:00 2001
From: Francis Secada <francis.secada@gmail.com>
Date: Sat, 25 Apr 2026 19:51:03 -0400
Subject: [PATCH 6/6] fix: add uvicorn and python-multipart to fastapi extra
 (needed by E2E test server)

---
 pyproject.toml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/pyproject.toml b/pyproject.toml
index b85ce0d..9575f0b 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -27,7 +27,9 @@ django = [
 ]
 fastapi = [
     "fastapi>=0.109.0",
+    "uvicorn[standard]>=0.27.0",
     "jinjax>=0.41",
+    "python-multipart>=0.0.5",
 ]
 litestar = [
     "litestar>=2.0",