Summary
Follow-up to #23032. The initial scaffold PR covers all 16 stories and core behaviours. Two areas were deferred for a focused follow-up: the horizontal card layout and AI label visual parity against the React counterpart.
Background
The React Card has 17 stories total — the WC scaffold ships 16. The missing story is WithHorizontalMedia (a separate story from WithMedia). Additionally, the WithAILabel story exists in WC but the CSS implementation diverges from React's approach in ways that need verifying.
Acceptance criteria
Horizontal layout
AI label
Files in scope
packages/web-components/src/components/card/card.stories.ts — add WithHorizontalMedia, wire horizontal Default control, verify WithAILabel
packages/web-components/src/components/card/card.scss — verify :host-context rules for has-ai-label, has-ai-label + has-actions, horizontal body/footer, and clickable AI label gradient
packages/web-components/src/components/card/card-media.ts — confirm slot self-assignment when card context horizontal changes
Summary
Follow-up to #23032. The initial scaffold PR covers all 16 stories and core behaviours. Two areas were deferred for a focused follow-up: the horizontal card layout and AI label visual parity against the React counterpart.
Background
The React
Cardhas 17 stories total — the WC scaffold ships 16. The missing story isWithHorizontalMedia(a separate story fromWithMedia). Additionally, theWithAILabelstory exists in WC but the CSS implementation diverges from React's approach in ways that need verifying.Acceptance criteria
Horizontal layout
WithHorizontalMediastory added tocard.stories.tsmatching the React counterpart (media on start, media on end, expressive density variants)horizontalcontrol in theDefaultstory correctly switches the card to side-by-side layoutcds-card-mediareceives theslot="media"assignment whenhorizontalis set on the parent (driven by context)media-position="end"reverses the column order (media on the right)WithHorizontalMediafor all variantsAI label
WithAILabelstory visually matches the React counterpart — blue gradient border, correctpadding-inline-endon title/label/description when AI label is presenthas-ai-label+has-actionscombined state applies the wider$spacing-13padding (title, label, description all shift left to clear both the AI label and the actions)::beforehover/focus gradient border (from_card.scsslines 462–477)WithAILabelvariantFiles in scope
packages/web-components/src/components/card/card.stories.ts— addWithHorizontalMedia, wire horizontal Default control, verifyWithAILabelpackages/web-components/src/components/card/card.scss— verify:host-contextrules forhas-ai-label,has-ai-label+has-actions, horizontal body/footer, and clickable AI label gradientpackages/web-components/src/components/card/card-media.ts— confirmslotself-assignment when card contexthorizontalchanges