@grantcodes/ui 2.11.0 → 2.11.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.11.1](https://github.com/grantcodes/ui/compare/ui-v2.11.0...ui-v2.11.1) (2026-05-03)
+
+
+### Bug Fixes
+
+* **form-field:** reflect label for SSR hydration and replace JS inline detection with CSS :has() ([9bc091b](https://github.com/grantcodes/ui/commit/9bc091bfaf838549479cc32f2ec9408e13eb14e3))
+
 ## [2.11.0](https://github.com/grantcodes/ui/compare/ui-v2.10.2...ui-v2.11.0) (2026-05-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantcodes/ui",
-  "version": "2.11.0",
+  "version": "2.11.1",
   "description": "A personal component system built with Lit web components",
   "type": "module",
   "main": "src/main.js",

package/src/components/form-field/form-field.component.js

@@ -1,7 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
 import formFieldStyles from "./form-field.css" with { type: "css" };
-import { classMap } from "lit/directives/class-map.js";
 import { generateId } from "../../lib/generate-id.js";
 
 export class GrantCodesFormField extends LitElement {
@@ -9,7 +8,7 @@ export class GrantCodesFormField extends LitElement {
 	static styles = [formFieldStyles];
 
 	static properties = {
-		label: { type: String },
+		label: { type: String, reflect: true },
 		error: { type: String },
 		help: { type: String },
 	};
@@ -21,7 +20,6 @@ export class GrantCodesFormField extends LitElement {
 		this.error = undefined;
 		this.help = undefined;
 
-		this.inlineInput = false;
 		this.groupInput = false;
 
 		/** @type {NodeListOf<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>} */
@@ -77,10 +75,6 @@ export class GrantCodesFormField extends LitElement {
 		input.id = this.id;
 		input.setAttribute("aria-describedby", this.ariaDescribedBy);
 
-		if (input.type === "checkbox" || input.type === "radio") {
-			this.inlineInput = true;
-			this.requestUpdate();
-		}
 	}
 
 	handleLabelClick() {
@@ -130,14 +124,9 @@ export class GrantCodesFormField extends LitElement {
 	}
 
 	render() {
-		const classes = classMap({
-			"form-field": true,
-			"form-field--inline": this.inlineInput,
-		});
-
 		if (this.groupInput) {
 			return html`
-      <fieldset class=${classes}>
+      <fieldset class="form-field">
         <legend class="form-field__label">${this.label}</legend>
         <slot></slot>
         ${this.errorTemplate()}
@@ -146,7 +135,7 @@ export class GrantCodesFormField extends LitElement {
 		}
 
 		return html`
-      <div class=${classes}>
+      <div class="form-field">
         <label>
           <span class="form-field__label" @click=${this.handleLabelClick}
             >${this.label}</span

package/src/components/form-field/form-field.css

@@ -20,7 +20,7 @@
 	gap: inherit;
 }
 
-.form-field--inline label {
+:host(:has(> input[type="checkbox"], > input[type="radio"])) .form-field label {
 	flex-direction: row-reverse;
 	align-items: center;
 	justify-content: flex-end;

package/src/components/form-field/form-field.test.js

@@ -30,6 +30,18 @@ describe("Form Field Component", () => {
 		);
 	});
 
+	it("should reflect label text for SSR client upgrade", async () => {
+		element = await fixture("grantcodes-form-field", {
+			label: "Username",
+		});
+
+		assert.strictEqual(
+			element.getAttribute("label"),
+			"Username",
+			"Label should be serialized to an attribute for client upgrade",
+		);
+	});
+
 	it("should display error message when error is set", async () => {
 		element = await fixture("grantcodes-form-field", {
 			label: "Email",