@boostdev/design-system-components 2.3.0 → 2.4.0

package/src/web-components/layout/bds-grid.spec.ts

@@ -60,11 +60,11 @@ describe('bds-grid', () => {
     cleanup(el);
   });
 
-  it('reflects masonry-preferred-column-span as a number property', async () => {
+  it('reflects masonry-preferred-column-span as a string property', async () => {
     const el = await fixture(
-      '<bds-grid is-masonry masonry-preferred-column-span="2"></bds-grid>',
+      '<bds-grid is-masonry masonry-preferred-column-span="half"></bds-grid>',
     ) as BdsGrid;
-    expect(el.masonryPreferredColumnSpan).toBe(2);
+    expect(el.masonryPreferredColumnSpan).toBe('half');
     cleanup(el);
   });
 });

package/src/web-components/layout/bds-grid.ts

@@ -1,5 +1,6 @@
 import { LitElement, css, html } from 'lit';
 import { applyMasonryLayout, clearMasonryLayout, supportsNativeMasonry } from '../../components/layout/Grid/masonry';
+import type { GridItemSpanValue } from '../../components/layout/Grid/GridItem';
 
 export type GridVariant = 'main' | 'page' | 'funnel' | 'custom';
 
@@ -16,9 +17,12 @@ export type GridVariant = 'main' | 'page' | 'funnel' | 'custom';
  *   auto-span-media — boolean; child `<bds-grid-item>`s without a `column-span`
  *                     attribute resolve their span from the intrinsic aspect
  *                     ratio of their first `<img>`/`<video>` child.
- *   masonry-preferred-column-span — number; masonry only. Child items without a
- *                     `column-span` attribute try to span this many columns; an
- *                     item at row-end is demoted to the remaining column count.
+ *   masonry-preferred-column-span — named span or number; masonry only. Child
+ *                     items without a `column-span` attribute try to span this
+ *                     value (e.g. `"half"`, `"one-third"`). Named values adapt
+ *                     across breakpoints via the foundation's responsive column
+ *                     tokens. An item at row-end is demoted to the remaining
+ *                     column count. Numeric values are literal and don't adapt.
  *
  * Slots:
  *   (default) — grid content; typically `<bds-grid-item>` children
@@ -80,7 +84,7 @@ export class BdsGrid extends LitElement {
     isMasonry: { type: Boolean, attribute: 'is-masonry', reflect: true },
     autoSpanMedia: { type: Boolean, attribute: 'auto-span-media', reflect: true },
     masonryPreferredColumnSpan: {
-      type: Number,
+      type: String,
       attribute: 'masonry-preferred-column-span',
       reflect: true,
     },
@@ -91,7 +95,7 @@ export class BdsGrid extends LitElement {
   declare isCentered: boolean;
   declare isMasonry: boolean;
   declare autoSpanMedia: boolean;
-  declare masonryPreferredColumnSpan: number | undefined;
+  declare masonryPreferredColumnSpan: string | undefined;
 
   private _ro?: ResizeObserver;
   private _mo?: MutationObserver;
@@ -156,12 +160,21 @@ export class BdsGrid extends LitElement {
       const container = this._gridEl();
       if (container) {
         applyMasonryLayout(container, this._items(), {
-          preferredColumnSpan: this.masonryPreferredColumnSpan,
+          preferredColumnSpan: this._resolvePreferredColumnSpan(),
         });
       }
     });
   }
 
+  private _resolvePreferredColumnSpan(): Exclude<GridItemSpanValue, 'auto'> | undefined {
+    const raw = this.masonryPreferredColumnSpan;
+    if (raw === undefined || raw === null || raw === '') return undefined;
+    // Numeric attribute → literal column count; otherwise treat as a named span.
+    const n = Number(raw);
+    if (Number.isFinite(n) && String(n) === raw) return n;
+    return raw as Exclude<GridItemSpanValue, 'auto'>;
+  }
+
   private _teardownMasonry() {
     cancelAnimationFrame(this._frame);
     this._ro?.disconnect();