[Web] PlaceDetailsCompact ignores horizontal orientation due to attribute/property casing mismatch #106

Description

The Lit renderer converts the A2UI PlaceDetailsCompact.orientation value to the uppercase Maps JavaScript property enum, but then binds that value as an HTML attribute:

const orientation = (props.orientation ?? autoOrientation).toUpperCase();

return html`
  <gmp-place-details-compact orientation="${orientation}">
`;

This produces orientation="HORIZONTAL". The Places UI Kit HTML API documents lowercase attribute values (orientation="horizontal"), while HORIZONTAL is the JavaScript property enum value. The component consequently falls back to its default vertical layout in this scenario.

This appears to have been introduced in commit f6dd90a. Before that change, the renderer hardcoded the lowercase HTML attribute orientation="horizontal".

Environment

• @googlemaps/a2ui: 0.1.8
• Web Lit renderer
• Maps JavaScript API: v=alpha
• One PlaceDetailsCompact component in the surface
• Card container width: approximately 488 px

Reproduction

Render a component with an explicit horizontal orientation:

{
  "id": "place-0",
  "component": "PlaceDetailsCompact",
  "placeId": "ChIJN1t_tDeuEmsRUsoyG83frY4",
  "orientation": "horizontal"
}

Expected behavior

The underlying gmp-place-details-compact renders horizontally.

Actual behavior

The underlying component renders vertically. Setting its public JavaScript property after rendering works:

placeDetailsCompact.orientation = 'HORIZONTAL';

Suggested fix

Either preserve lowercase when binding the HTML attribute:

const orientation = props.orientation ?? autoOrientation;

html`<gmp-place-details-compact orientation="${orientation}">`;

Or use Lit property binding with the uppercase enum value:

const orientation = (props.orientation ?? autoOrientation).toUpperCase();

html`<gmp-place-details-compact .orientation=${orientation}>`;

Related observations

• The Zod schema uses .default('horizontal'), so props.orientation ?? autoOrientation never reaches autoOrientation when the property is omitted. That conflicts with the comment saying a single sibling should default to vertical.
• HTMLElementTagNameMap declares gmpx-place-details-compact, while the rendered element is gmp-place-details-compact.
• The existing test only verifies the attribution ID and does not assert orientation forwarding or fallback behavior.

Relevant source: https://github.com/googlemaps/a2ui/blob/main/client/web/src/lit/custom-components/place_details_compact.ts

Places UI Kit documentation: https://developers.google.com/maps/documentation/javascript/places-ui-kit/place-details