Decisions: Card Select

A wrapper around the published CardSelect (2026-11-03)

Decision: CardSelect.tsx wraps the package CardSelect. The one prop shadow adds the class pds-card-select--no-shadow when false; the look is CSS in card-select.css.
Why: same concept and role, only the look changes, and the markup, radio inputs and keyboard behavior come from PDS. Same approach as the Select proposal.
Port impact: the engineer adds shadow?: boolean (default true) to the real CardSelect, the class, and the no-shadow rules in card-select.css.

Decision: with shadow={false}, the card gets a --pds-border-width-default border in --pds-color-border-input.
Why: the PDS raised shadow already includes a 1px edge ring, so removing it alone would leave a white card invisible on a white surface. The designer chose the input border color so a card reads like the other form controls.
Port impact: none beyond the CSS.

Decision: on hover the card gets --pds-color-button-secondary-background-hover as a layer over its own background (background-image), not as a replacement of background-color.
Why: the designer asked for the Button hover background. The primary Button hover is a brand fill and too strong for a card; the secondary hover is a neutral translucent tint (5% black in light, 8% white in dark). The token is translucent, so it sits on top of the card background instead of replacing it, which keeps the default, secondary and transparent backgrounds correct.
Port impact: none beyond the CSS.

Decision: in no-shadow mode the focus-color ring marks the selected card only when showIndicator={false}, as PDS does today, minus the overlay shadow. With the indicator, the check icon marks it and the border stays the input color.
Why: the designer's call: the blue outline is saved for the no-indicator state. First built with the ring in both cases, then changed.
Port impact: the no-shadow rule for __option-label--selected is scoped to --no-indicator; the engineer ports it with the prop.

Decision: a new component set Card select item (665:265) built like the library item: a horizontal auto-layout with the library circle / circleCheck icon and the library Placeholder content instance, no text. Properties: Shadow (On, Off), State (Default, Hover, Selected) and Show Indicator (True, False), 12 variants. Card Select (666:213) is the group: a label and a row of three exposed Card select item instances. The group has no Shadow property.
Why: the library item is only a placeholder; its content is a slot, so the first build with a label and description was wrong (the designer's correction). The shadow is on each card in PDS (.pds-card-select__option-label; the fieldset has none), so Shadow is a property of the item, set per card through the exposed instances. Two earlier builds (text in the item; Shadow On/Off on the group) were replaced the same day.
Port impact: none for code. In Storybook the shadow prop is on CardSelect and applies to every card; in Figma it is set per card.

Decision: Shadow=On uses elevation/light-mode/raised (Default, and Selected with the check) and elevation/light-mode/overlay (Hover, and Selected without the indicator), as the PDS CSS does, and no border. Shadow=Off has no effect: a 1px inside border in semantic/border/input, a hover tint (semantic/button/secondary/background/hover layered over the fill), and the focus-color ring (2px) on the selected card without the indicator. The selected card with the indicator shows the check and keeps its border.
Why: mirrors the CSS in card-select.css and the PDS Card Select.
Port impact: none for code.

Decision: the indicator is the library circle icon with its vector fill bound to semantic/border/input, the color Storybook uses for an unselected card; the selected card uses circleCheck with semantic/status/success/fill.
Why: the icon has only a Size property, so a color change is a fill on its vector. The designer's call: a color on the nested icon is fine as long as it is a token.
Port impact: none for code.

Decision: the item pads 20 top and bottom and 24 left and right (primitive/spacing/L and XL), the PDS code (--pds-spacing-l, --pds-spacing-xl). The library Card select item pads 16 on all sides. Height is fixed at 92 (the placeholder is 52, as in the library item).
Why: the designer's call: follow Storybook.
Port impact: none for code. Design: the library item should be updated to 20 and 24. HANDOFF.md says so.

Decision: Show Indicator is a True / False variant property. The prop map first listed it as a boolean like the library item's.
Why: with the indicator off, the selected card is marked by the focus ring instead of the check, so the look changes with the property. A boolean can only show or hide the circle.
Port impact: none for code.

Decision: no Size (m, l), Disabled, background, padding, imageVariant or Show Card Labels in the Figma item. They exist in Storybook and the PDS component.
Why: story scope, agreed with the designer. Size is dropped because the item has no label and the icon has no 22px size, so m and l would look the same.
Port impact: none for code. HANDOFF.md says so.

None open. The first Figma builds (Card select item (no shadow) and the group set with Shadow On/Off) were deleted by the designer on 2026-11-03.