@boostdev/design-system-components 2.1.0 → 2.2.0

package/AGENTS.md

@@ -28,12 +28,13 @@ import '@boostdev/design-system-components/web-components';
 - **ui/**: Accordion, Alert, Avatar, Badge, Breadcrumb, Calendar, Carousel, Collapsible, DescriptionList, Link, Loading, NotificationBanner, Pagination, Progress, ProgressCircle, Separator, Skeleton, SkipLink, Table, Tabs, Tooltip, Typography
 - **interaction/**: Button, Command, Dialog, Drawer, DropdownMenu, Popover, Rating, Toast (ToastProvider + useToast hook)
 - **interaction/form/**: Checkbox, CheckboxGroup, Combobox, FileInput, FormInput, NumberInput, Radio, RadioGroup, SegmentedControl, Select, Slider, Switch, Textarea (+ atom primitives: Label, Message, InputContainer)
-- **layout/**: ButtonContainer (formerly ButtonGroup — deprecated alias still available), Card, IconWrapper, SectionHeader
+- **layout/**: ButtonContainer (formerly ButtonGroup — deprecated alias still available), Card, Grid (supports `isMasonry` — CSS Grid Level 3 with row-span polyfill — and `autoSpanMedia` — per-item span derived from media aspect ratio), GridItem (supports `columnSpan="auto"`), IconWrapper, SectionHeader
 
 ### Web Components (experimental) — `src/web-components/`
 Custom elements built with Lit. Entry: `src/web-components/index.ts`. Bundled with Lit (no peer dep required).
 
 - **ui/**: `<bds-alert>`, `<bds-avatar>`, `<bds-badge>`, `<bds-breadcrumb>`, `<bds-button-group>`, `<bds-calendar>`, `<bds-card>`, `<bds-carousel>`, `<bds-description-list>`, `<bds-icon-wrapper>`, `<bds-link>`, `<bds-loading>`, `<bds-notification-banner>`, `<bds-pagination>`, `<bds-progress>`, `<bds-progress-circle>`, `<bds-rating>`, `<bds-section-header>`, `<bds-separator>`, `<bds-skeleton>`, `<bds-table>`, `<bds-typography>`
+- **layout/**: `<bds-grid>`, `<bds-grid-item>`
 - **interaction/**: `<bds-accordion>`, `<bds-accordion-item>`, `<bds-button>`, `<bds-collapsible>`, `<bds-dialog>`, `<bds-drawer>`, `<bds-dropdown-menu>`, `<bds-dropdown-menu-item>`, `<bds-popover>`, `<bds-skip-link>`, `<bds-tab>`, `<bds-tab-panel>`, `<bds-tabs>`, `<bds-toast-provider>`, `<bds-tooltip>`
 - **interaction/form/**: `<bds-checkbox>`, `<bds-checkbox-group>`, `<bds-combobox>`, `<bds-file-input>`, `<bds-form-input>`, `<bds-number-input>`, `<bds-radio>`, `<bds-radio-group>`, `<bds-segmented-control>`, `<bds-select>`, `<bds-slider>`, `<bds-switch>`, `<bds-textarea>`
 

package/README.md

@@ -388,6 +388,46 @@ import { Card } from '@boostdev/design-system-components';
 
 ---
 
+#### Grid / GridItem
+
+```tsx
+import { Grid, GridItem, GridItemSpan } from '@boostdev/design-system-components';
+
+<Grid variant="main">
+  <GridItem columnSpan="half">Left</GridItem>
+  <GridItem columnSpan="half">Right</GridItem>
+</Grid>
+
+<Grid variant="custom" columns={5}>
+  {items.map((item) => <GridItem key={item.id} columnSpan={1}>{item.label}</GridItem>)}
+</Grid>
+```
+
+Named `columnSpan` values are responsive via the foundation breakpoint ladder (4 / 8 / 12 columns across mobile / tablet / desktop). Also available as a web component: `<bds-grid>` / `<bds-grid-item>`.
+
+**Grid props**
+
+| Prop         | Type                                             | Default  |
+|--------------|--------------------------------------------------|----------|
+| `variant`    | `'main' \| 'page' \| 'funnel' \| 'custom'`       | `'main'` |
+| `columns`    | `number`                                         | —        |
+| `isCentered` | `boolean`                                        | `false`  |
+| `isMasonry`  | `boolean` — CSS Grid Level 3 masonry layout (native + JS polyfill) | `false` |
+| `autoSpanMedia` | `boolean` — children without `columnSpan` auto-span by media aspect ratio | `false` |
+| `as`         | `ElementType`                                    | `'div'`  |
+
+**GridItem props**
+
+| Prop          | Type                                                                                             | Default  |
+|---------------|--------------------------------------------------------------------------------------------------|----------|
+| `columnSpan`  | `'full' \| 'three-quarters' \| 'two-thirds' \| 'half' \| 'one-third' \| 'one-quarter' \| 'auto' \| number` — `'auto'` derives span from the first `<img>`/`<video>` descendant's aspect ratio | `'full'` |
+| `rowSpan`     | `number`                                                                                         | —        |
+| `startColumn` | `number` — escape hatch                                                                          | —        |
+| `endColumn`   | `number` — escape hatch                                                                          | —        |
+| `as`          | `ElementType`                                                                                    | `'div'`  |
+
+---
+
 #### SectionHeader
 
 ```tsx