From 32813d314ddf2459c53247a064a8a6b4cdd4148c Mon Sep 17 00:00:00 2001
From: NullVoxPopuli-ai-agent
 <268630448+NullVoxPopuli-ai-agent@users.noreply.github.com>
Date: Mon, 20 Jul 2026 12:49:19 -0400
Subject: [PATCH 1/4] =?UTF-8?q?docs-app:=20styling=20pass=20=E2=80=94=20he?=
 =?UTF-8?q?ro,=20themed=20demo=20cards,=20dark-mode-safe=20controls?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- landing: '@universal-ember/' eyebrow over a large boxed 'form' display
  title (echoing the family look), pill call-to-action, centered
  responsive blurb/features (fixed 50%/66% widths replaced with
  max-widths)
- every live demo now renders in a bordered light-dark() card
  (.repl-sdk__demo — ember-repl's wrapper — plus the older
  .glimdown-render for good measure); demo inputs/selects/textareas and
  buttons get explicit light-dark() colors instead of forced black text,
  which was illegible on dark backgrounds
- note: do not set 'color-scheme: light dark' on individual controls —
  it re-enables OS preference and defeats the site's forced scheme
- theme-aware hr

Verified in the browser in both themes (landing, docs pages, demos);
docs-app page-walk/a11y suite passes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs-app/src/styles/app.css             | 83 +++++++++++++++++--------
 docs-app/src/templates/index.gts        | 82 ++++++++++++++++++++----
 packages/ember-headless-form/LICENSE.md |  9 +++
 packages/ember-headless-form/README.md  | 44 +++++++++++++
 4 files changed, 180 insertions(+), 38 deletions(-)
 create mode 100644 packages/ember-headless-form/LICENSE.md
 create mode 100644 packages/ember-headless-form/README.md

diff --git a/docs-app/src/styles/app.css b/docs-app/src/styles/app.css
index dbc69b8..ff66705 100644
--- a/docs-app/src/styles/app.css
+++ b/docs-app/src/styles/app.css
@@ -185,32 +185,65 @@ body {
   justify-content: space-around;
 }
 
-/* demo container tweaks */
-.featured-demo {
-  button {
-    color: black;
-    background: white;
-    border: 1px solid;
-    padding: 0 0.25rem;
-  }
-
-  &[data-demo-fit] {
-    .glimdown-render {
-      max-height: unset;
-    }
-  }
-
-  &[data-demo-tight] {
-    .glimdown-render {
-      padding: 2rem;
-    }
-  }
+/*
+ * Live demo presentation
+ *
+ * kolay renders every ```gjs live``` fence's output into a
+ * .glimdown-render element; style it as a card so demos are visually
+ * contained in both themes, and keep the demos' native form controls
+ * legible in dark mode.
+ */
+.repl-sdk__demo,
+.glimdown-render {
+  border: 1px solid light-dark(#e2e8f0, #334155);
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  margin-block: 1rem;
+  background: light-dark(#f8fafc, #0b1120);
+  color: light-dark(#0f172a, #e2e8f0);
+}
+
+.repl-sdk__demo input,
+.repl-sdk__demo select,
+.repl-sdk__demo textarea,
+.glimdown-render input,
+.glimdown-render select,
+.glimdown-render textarea {
+  background: light-dark(white, #1e293b);
+  color: light-dark(black, #e2e8f0);
+  border-color: light-dark(#94a3b8, #475569);
+}
+
+.repl-sdk__demo button,
+.glimdown-render button {
+  color: light-dark(black, white);
+  background: light-dark(white, #334155);
+  border: 1px solid light-dark(#94a3b8, #475569);
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.75rem;
+}
+
+.repl-sdk__demo button:hover,
+.glimdown-render button:hover {
+  background: light-dark(#f1f5f9, #475569);
+}
+
+.repl-sdk__demo a,
+.glimdown-render a {
+  color: light-dark(#4f46e5, #93c5fd);
+}
+
+.featured-demo[data-demo-fit] .repl-sdk__demo,
+.glimdown-render {
+  max-height: unset;
 }
 
+.featured-demo[data-demo-tight] .repl-sdk__demo,
 .glimdown-render {
-  input,
-  select,
-  textarea {
-    color: black;
-  }
+  padding: 2rem;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid light-dark(#e2e8f0, #334155);
 }
diff --git a/docs-app/src/templates/index.gts b/docs-app/src/templates/index.gts
index 1b74967..b7b2a05 100644
--- a/docs-app/src/templates/index.gts
+++ b/docs-app/src/templates/index.gts
@@ -17,8 +17,11 @@ import {
       </TopRight>
     </:header>
     <:tagline>
-      <h1 class="landing-title">Form</h1>
-      <p>
+      <header class="landing-hero">
+        <p class="landing-scope">@universal-ember/</p>
+        <h1 class="landing-title">form</h1>
+      </header>
+      <p class="landing-tagline">
         The Ember.js library that distills the common behavior and accessibility
         best practices of forms into reusable components, without any opinions
         on specific markup or styling. Use it to build your forms directly, or
@@ -26,10 +29,7 @@ import {
       </p>
     </:tagline>
     <:callToAction>
-      <InternalLink
-        href="/1-get-started/index.md"
-        style="color: white; text-shadow: 0px 2px 0px black; transform: scale(2.5);"
-      >
+      <InternalLink href="/1-get-started/index.md" class="landing-cta">
         Get Started ➤
       </InternalLink>
     </:callToAction>
@@ -42,8 +42,6 @@ import {
         is none of this: all the flexibility, without reinventing the wheel.
       </div>
 
-      <br /><br />
-
       <div class="landing-features">
         <Article class="flex flex-wrap gap-12 justify-around">
 
@@ -91,21 +89,79 @@ import {
       </div>
 
       <style>
+        .landing-hero {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 0.25rem;
+        }
+
+        .landing-scope {
+          font-family: var(--font-display);
+          font-style: normal;
+          font-size: clamp(1rem, 2.5vw, 1.5rem);
+          font-weight: 500;
+          letter-spacing: 0.05em;
+          opacity: 0.85;
+          margin: 0;
+        }
+
         .landing-title {
-          font-size: 1.875rem;
-          margin-bottom: 1rem;
+          font-family: var(--font-display);
+          font-style: normal;
+          font-size: clamp(4rem, 12vw, 7rem);
+          font-weight: 800;
+          line-height: 1;
+          margin: 0 0 1rem;
+          padding: 0.05em 0.25em 0.12em;
+          border-radius: 0.12em;
+          background: rgb(30 30 42 / 85%);
+          color: white;
+          box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
+        }
+
+        .landing-tagline {
+          max-width: 46ch;
+          margin: 0;
+        }
+
+        a.landing-cta,
+        a.landing-cta:visited {
+          display: inline-block;
+          font-family: var(--font-display);
+          font-style: normal;
+          font-size: 1.5rem;
+          font-weight: 700;
+          text-decoration: none;
+          color: #1e1b4b !important;
+          background: white;
+          padding: 0.5rem 1.75rem;
+          border-radius: 999px;
+          box-shadow: 0 6px 20px rgb(0 0 0 / 30%);
+          transition:
+            transform 0.15s ease,
+            box-shadow 0.15s ease;
+        }
+
+        .landing-cta:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 10px 28px rgb(0 0 0 / 35%);
+          text-decoration: none;
         }
 
         .landing-blurb {
           font-size: 1.5rem;
-          width: 50%;
+          max-width: 60ch;
           margin-inline: auto;
-          padding: 2rem;
+          padding: 2rem 1.5rem;
+          text-align: center;
+          text-wrap: balance;
         }
 
         .landing-features {
-          width: 66%;
+          max-width: 72rem;
           margin-inline: auto;
+          padding: 1rem 1.5rem 3rem;
         }
 
         .landing-feature {
diff --git a/packages/ember-headless-form/LICENSE.md b/packages/ember-headless-form/LICENSE.md
new file mode 100644
index 0000000..9438560
--- /dev/null
+++ b/packages/ember-headless-form/LICENSE.md
@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2023
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/packages/ember-headless-form/README.md b/packages/ember-headless-form/README.md
new file mode 100644
index 0000000..dfc344b
--- /dev/null
+++ b/packages/ember-headless-form/README.md
@@ -0,0 +1,44 @@
+# @universal-ember/form 
+
+[![CI](https://github.com/universal-ember/form/actions/workflows/ci.yml/badge.svg?branch=main&event=push)](https://github.com/universal-ember/form/actions/workflows/ci.yml)
+
+
+The Ember.js addon that distills the common behavior and accessibility best practices of forms into reusable components, without any opinions on specific markup or styling. Use it to build your forms directly, or to build your opinionated forms component kit on top of it.
+
+## Key Features
+
+- Semantic form markup with accessibility best practices baked in
+- Integrates native HTML5 validation with custom error rendering
+- Extension points for custom JavaScript-based validation
+- Optional ready-to-use integrations for `ember-changeset` and `yup` based validation
+- Support for async state
+- TypeScript / Glint support with tight types
+- Octane-based v2 addon
+- Fully tested
+
+## Compatibility
+
+- Ember.js v4.4 or above
+- Embroider or ember-auto-import v2
+
+## Installation
+
+```
+ember install ember-headless-form
+```
+
+## Usage
+
+Visit our [documentation website](https://ember-headless-form.pages.dev/).
+
+## Contributing
+
+See the [Contributing](CONTRIBUTING.md) guide for details.
+
+## Credits
+
+Originally from [CrowdStrike's ember-headless-form](https://github.com/crowdstrike/ember-headless-form)
+
+## License
+
+This project is licensed under the [MIT License](LICENSE.md).

From 723adccd0311fd9c7b289a67d160024865d53783 Mon Sep 17 00:00:00 2001
From: NullVoxPopuli-ai-agent
 <268630448+NullVoxPopuli-ai-agent@users.noreply.github.com>
Date: Mon, 20 Jul 2026 12:53:25 -0400
Subject: [PATCH 2/4] docs-app landing: use the family call-to-action style,
 not a generic pill

The scaled InternalLink with docs-support's offset-underline treatment is
the universal-ember signature (same as ember-primitives); the pill
button read as generic.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs-app/src/templates/index.gts | 29 ++++-------------------------
 1 file changed, 4 insertions(+), 25 deletions(-)

diff --git a/docs-app/src/templates/index.gts b/docs-app/src/templates/index.gts
index b7b2a05..460d55a 100644
--- a/docs-app/src/templates/index.gts
+++ b/docs-app/src/templates/index.gts
@@ -29,7 +29,10 @@ import {
       </p>
     </:tagline>
     <:callToAction>
-      <InternalLink href="/1-get-started/index.md" class="landing-cta">
+      <InternalLink
+        href="/1-get-started/index.md"
+        style="color: white; text-shadow: 0px 2px 0px black; transform: scale(2.5);"
+      >
         Get Started ➤
       </InternalLink>
     </:callToAction>
@@ -125,30 +128,6 @@ import {
           margin: 0;
         }
 
-        a.landing-cta,
-        a.landing-cta:visited {
-          display: inline-block;
-          font-family: var(--font-display);
-          font-style: normal;
-          font-size: 1.5rem;
-          font-weight: 700;
-          text-decoration: none;
-          color: #1e1b4b !important;
-          background: white;
-          padding: 0.5rem 1.75rem;
-          border-radius: 999px;
-          box-shadow: 0 6px 20px rgb(0 0 0 / 30%);
-          transition:
-            transform 0.15s ease,
-            box-shadow 0.15s ease;
-        }
-
-        .landing-cta:hover {
-          transform: translateY(-2px);
-          box-shadow: 0 10px 28px rgb(0 0 0 / 35%);
-          text-decoration: none;
-        }
-
         .landing-blurb {
           font-size: 1.5rem;
           max-width: 60ch;

From 3a11d1b9abd22f44f4ca0af38c0e1d63dc79eeb8 Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Mon, 20 Jul 2026 23:23:26 -0400
Subject: [PATCH 3/4] Delete packages/ember-headless-form/LICENSE.md

---
 packages/ember-headless-form/LICENSE.md | 9 ---------
 1 file changed, 9 deletions(-)
 delete mode 100644 packages/ember-headless-form/LICENSE.md

diff --git a/packages/ember-headless-form/LICENSE.md b/packages/ember-headless-form/LICENSE.md
deleted file mode 100644
index 9438560..0000000
--- a/packages/ember-headless-form/LICENSE.md
+++ /dev/null
@@ -1,9 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2023
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

From 859cae0beb8a34f0d03de54d246c0445587d1b0f Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Mon, 20 Jul 2026 23:23:36 -0400
Subject: [PATCH 4/4] Delete packages/ember-headless-form/README.md

---
 packages/ember-headless-form/README.md | 44 --------------------------
 1 file changed, 44 deletions(-)
 delete mode 100644 packages/ember-headless-form/README.md

diff --git a/packages/ember-headless-form/README.md b/packages/ember-headless-form/README.md
deleted file mode 100644
index dfc344b..0000000
--- a/packages/ember-headless-form/README.md
+++ /dev/null
@@ -1,44 +0,0 @@
-# @universal-ember/form 
-
-[![CI](https://github.com/universal-ember/form/actions/workflows/ci.yml/badge.svg?branch=main&event=push)](https://github.com/universal-ember/form/actions/workflows/ci.yml)
-
-
-The Ember.js addon that distills the common behavior and accessibility best practices of forms into reusable components, without any opinions on specific markup or styling. Use it to build your forms directly, or to build your opinionated forms component kit on top of it.
-
-## Key Features
-
-- Semantic form markup with accessibility best practices baked in
-- Integrates native HTML5 validation with custom error rendering
-- Extension points for custom JavaScript-based validation
-- Optional ready-to-use integrations for `ember-changeset` and `yup` based validation
-- Support for async state
-- TypeScript / Glint support with tight types
-- Octane-based v2 addon
-- Fully tested
-
-## Compatibility
-
-- Ember.js v4.4 or above
-- Embroider or ember-auto-import v2
-
-## Installation
-
-```
-ember install ember-headless-form
-```
-
-## Usage
-
-Visit our [documentation website](https://ember-headless-form.pages.dev/).
-
-## Contributing
-
-See the [Contributing](CONTRIBUTING.md) guide for details.
-
-## Credits
-
-Originally from [CrowdStrike's ember-headless-form](https://github.com/crowdstrike/ember-headless-form)
-
-## License
-
-This project is licensed under the [MIT License](LICENSE.md).