Composition
sm-shoppable-product
sm-product + variant picker + add-to-cart action. Composed of: VStack(sm-product + HStack(Button × N variants + Spacer + Button-add)). Selecting a variant drives the parent sm-cart via the registry event bus.
Responsive Preview — viewport @media queries
Mobile · 375 px
Tablet · 768 px
Desktop · 1280 px
Container Tier (SM widget responsive system)
Container width
Live Preview (chrome-mode, container-tier knobs)
DSL usage
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
product-id | String | — | Catalog identifier |
title | String | — | Display title |
price | Decimal | — | Numeric price |
currency | ISO-4217 | EUR | Currency code |
variants | CSV | — | Available variants (size/colour SKUs) |
image | URL | — | Hero image |