fix(ui): reset location dropdown list styling and show required mark when only timezone is required

Author: ph33nx

packages/ui/src/components/endpoint-form.ts

@@ -522,10 +522,12 @@ export class RoxyEndpointForm extends LitElement {
 		return LOCATION_TRIO.every((n) => inGroup.some((f) => f.name === n));
 	}
 
-	/** True when the location trio in a group is required, so the block shows a required mark. */
+	/**
+	 * True when the location block must show a required mark, i.e. ANY member of the trio is required. The block is a single city-search input that fills all three, so if even one is required (e.g. bodygraph requires `timezone` while `latitude`/`longitude` are optional) the input is required and `collectMissing` blocks submit without it. Requiring ALL three understated that: the asterisk went missing on a block the form still enforced, which reads as optional to a non-technical embedder.
+	 */
 	private locationRequired(group?: string): boolean {
 		const inGroup = this.fields.filter((f) => f.group === group);
-		return LOCATION_TRIO.every((n) =>
+		return LOCATION_TRIO.some((n) =>
 			inGroup.some((f) => f.name === n && f.required),
 		);
 	}

packages/ui/src/components/location-search.ts

@@ -86,6 +86,12 @@ export class RoxyLocationSearch extends LitElement {
 				top: calc(100% + 4px);
 				left: 0;
 				right: 0;
+				/* Reset the UA <ul> defaults, or the listbox shows disc bullets and a
+				 * ~40px inline indent. Small even inset so rounded rows never clip the
+				 * container corners. */
+				margin: 0;
+				padding: var(--roxy-space-xs, 0.25rem);
+				list-style: none;
 				background: var(--roxy-bg, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
@@ -97,12 +103,13 @@ export class RoxyLocationSearch extends LitElement {
 			}
 			.option {
 				display: flex;
-				align-items: baseline;
+				align-items: center;
 				gap: var(--roxy-space-sm, 0.5rem);
 				width: 100%;
 				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
 				background: transparent;
 				border: 0;
+				border-radius: var(--roxy-radius-sm, 6px);
 				text-align: left;
 				font-family: inherit;
 				font-size: var(--roxy-text-sm, 0.875rem);

packages/ui/tests/endpoint-form.test.ts

@@ -176,6 +176,41 @@ describe('endpoint-form input registry rendering', () => {
 		el.remove();
 	});
 
+	test('location block shows a required mark when only timezone is required (bodygraph shape)', async () => {
+		// Bodygraph requires timezone but defaults latitude/longitude, so the single
+		// city-search input is still required (collectMissing blocks submit without it).
+		// The asterisk must reflect that, or the block reads as optional to an embedder.
+		const el = await mountForm(
+			{
+				title: 'Generate full Human Design bodygraph',
+				hasLang: true,
+				fields: [
+					{ key: 'date', name: 'date', kind: 'date', required: true },
+					{ key: 'time', name: 'time', kind: 'time', required: true },
+					{
+						key: 'latitude',
+						name: 'latitude',
+						kind: 'number',
+						required: false,
+					},
+					{
+						key: 'longitude',
+						name: 'longitude',
+						kind: 'number',
+						required: false,
+					},
+					{ key: 'timezone', name: 'timezone', kind: 'number', required: true },
+				],
+			},
+			{ 'data-endpoint': 'human-design/bodygraph', method: 'POST' },
+		);
+		const root = el.shadowRoot as ShadowRoot;
+		const block = root.querySelector('.location-block');
+		expect(block).not.toBeNull();
+		expect(block?.querySelector('.req')).not.toBeNull();
+		el.remove();
+	});
+
 	test('a failed submit renders an inline role=alert listing humanized missing fields', async () => {
 		const el = await mountForm(
 			{