@grantcodes/ui 2.11.0 → 2.11.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.11.2](https://github.com/grantcodes/ui/compare/ui-v2.11.1...ui-v2.11.2) (2026-05-03)
+
+
+### Bug Fixes
+
+* **ui:** add horizontal property to form field ([1a0bbfa](https://github.com/grantcodes/ui/commit/1a0bbfa1ed69e341c5e43ee0678bcb9d0f0469a7))
+
+## [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.2",
   "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,7 @@
 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 formFieldStyles from "./form-field.css" with { type: "css" };
 import { generateId } from "../../lib/generate-id.js";
 
 export class GrantCodesFormField extends LitElement {
@@ -9,7 +9,8 @@ export class GrantCodesFormField extends LitElement {
 	static styles = [formFieldStyles];
 
 	static properties = {
-		label: { type: String },
+    label: { type: String, reflect: true },
+		direction: { type: String },
 		error: { type: String },
 		help: { type: String },
 	};
@@ -21,8 +22,13 @@ export class GrantCodesFormField extends LitElement {
 		this.error = undefined;
 		this.help = undefined;
 
-		this.inlineInput = false;
-		this.groupInput = false;
+    this.groupInput = false;
+
+    /**
+		 * Direction of the field. Generally want horizontal for checkboxes and radios.
+		 * @type {'vertical' | 'horizontal'}
+		 */
+		this.direction = "vertical";
 
 		/** @type {NodeListOf<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>} */
 		this.inputElements;
@@ -77,10 +83,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() {
@@ -129,24 +131,23 @@ export class GrantCodesFormField extends LitElement {
     `;
 	}
 
-	render() {
-		const classes = classMap({
-			"form-field": true,
-			"form-field--inline": this.inlineInput,
-		});
-
+  render() {
+    const wrapperClass = classMap({
+      'form-field': true,
+      'form-field--horizontal': this.direction === 'horizontal'
+    })
 		if (this.groupInput) {
 			return html`
-      <fieldset class=${classes}>
+      <fieldset class=${wrapperClass}>
         <legend class="form-field__label">${this.label}</legend>
         <slot></slot>
         ${this.errorTemplate()}
       </fieldset>
     `;
-		}
+    }
 
 		return html`
-      <div class=${classes}>
+      <div class=${wrapperClass}>
         <label>
           <span class="form-field__label" @click=${this.handleLabelClick}
             >${this.label}</span

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

@@ -20,10 +20,11 @@
 	gap: inherit;
 }
 
-.form-field--inline label {
+.form-field--horizontal label {
 	flex-direction: row-reverse;
 	align-items: center;
 	justify-content: flex-end;
+	gap: var(--g-theme-spacing-sm);
 }
 
 .form-field__label {

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

@@ -42,7 +42,7 @@ export const FormFieldWithHelp = {
 };
 
 export const FormFieldWithSelect = {
-	args: {
+  args: {
 		slot: html`
       <select>
         <option value="1">Option 1</option>
@@ -60,13 +60,15 @@ export const FormFieldWithTextArea = {
 };
 
 export const FormFieldWithCheckbox = {
-	args: {
+  args: {
+    direction: 'horizontal',
 		slot: html`<input type="checkbox" value="1" name="name" />`,
 	},
 };
 
 export const FormFieldWithRadio = {
-	args: {
+  args: {
+    direction: 'horizontal',
 		slot: html`<input type="radio" />`,
 	},
 };
@@ -74,13 +76,13 @@ export const FormFieldWithRadio = {
 export const FormFieldWithRadioGroup = {
 	args: {
 		slot: html`
-      <grantcodes-form-field label="Radio number 1">
+      <grantcodes-form-field label="Radio number 1" direction="horizontal">
         <input type="radio" name="radio-group" value="1" />
       </grantcodes-form-field>
-      <grantcodes-form-field label="Radio number 2">
+      <grantcodes-form-field label="Radio number 2" direction="horizontal">
         <input type="radio" name="radio-group" value="2" />
       </grantcodes-form-field>
-      <grantcodes-form-field label="Radio number 3">
+      <grantcodes-form-field label="Radio number 3" direction="horizontal">
         <input type="radio" name="radio-group" value="3" />
       </grantcodes-form-field>
     `,
@@ -90,13 +92,13 @@ export const FormFieldWithRadioGroup = {
 export const FormFieldWithCheckboxGroup = {
 	args: {
 		slot: html`
-      <grantcodes-form-field label="Checkbox number 1"
+      <grantcodes-form-field label="Checkbox number 1" direction="horizontal"
         ><input type="checkbox"
       /></grantcodes-form-field>
-      <grantcodes-form-field label="Checkbox number 2"
+      <grantcodes-form-field label="Checkbox number 2" direction="horizontal"
         ><input type="checkbox"
       /></grantcodes-form-field>
-      <grantcodes-form-field label="Checkbox number 3"
+      <grantcodes-form-field label="Checkbox number 3" direction="horizontal"
         ><input type="checkbox"
       /></grantcodes-form-field>
     `,

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",