# XWUIProductVariantSelector

A color/size/etc. variant picker: one swatch/pill row per attribute in `data.attributeOptions`; selecting a value across every attribute resolves the matching `data.variants` entry and updates the displayed price/stock. The "Add to cart" button is disabled until a full, in-stock variant is resolved.

## Events

| Event | Callback | Subscriber | `detail` |
|---|---|---|---|
| `xwui-product-variant-selector:variant-change` | `onVariantChange` | `onVariantChange(handler)` | `{ variant }` (`null` until every attribute is chosen) |
| `xwui-product-variant-selector:add-to-cart` | `onAddToCart` | `onAddToCart(handler)` | `{ variant }` |

## Usage

```ts
import { XWUIProductVariantSelector } from '@exonware/xwui/industry';

const selector = new XWUIProductVariantSelector(host, {
  attributeOptions: { color: ['Black', 'White'], size: ['S', 'M', 'L'] },
  variants: [
    { id: 'v1', attributes: { color: 'Black', size: 'S' }, price: 24, stock: 12 },
  ],
});

selector.onAddToCart((variant) => cart.add(variant.id));
```

```api
```