@boostdev/design-system-components 2.8.0 → 2.11.0

package/src/web-components/interaction/form/bds-switch.ts

@@ -13,17 +13,35 @@ import { LitElement, css, html } from 'lit';
  *   checked  — boolean; whether the switch is on
  *   required — boolean
  *   disabled — boolean
+ *   error    — error message; when set the track shows the error colour and
+ *              the input reports `aria-invalid="true"`
+ *   size     — "small" | "medium" (default) | "large"
  *
  * Slots:
  *   (default) — label text
  *
+ * Events:
+ *   bds-change — composed CustomEvent fired when the switch is toggled
+ *                (crosses the shadow boundary); `detail: { checked: boolean }`
+ *
  * @example
  * <bds-switch name="notifications" value="enabled">Enable notifications</bds-switch>
+ * <bds-switch name="darkMode" size="small" error="Required">Dark mode</bds-switch>
  */
 export class BdsSwitch extends LitElement {
   static formAssociated = true;
 
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: inline-flex;
       align-items: center;
@@ -32,6 +50,19 @@ export class BdsSwitch extends LitElement {
       font-size: var(--bds-font_size--body);
       font-family: var(--bds-font_family--body);
       color: var(--switch_color, var(--bds-color_on-bg));
+
+      --switch_thumb-size: 1.25em;
+      --switch_track-pad: var(--bds-space_xxxs);
+      --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
+      --switch_track-width: calc(var(--switch_thumb-size) * 2 + var(--switch_track-pad) * 2);
+    }
+
+    :host([size='small']) {
+      --switch_thumb-size: 1em;
+    }
+
+    :host([size='large']) {
+      --switch_thumb-size: 1.5em;
     }
 
     :host([disabled]) {
@@ -47,6 +78,19 @@ export class BdsSwitch extends LitElement {
       cursor: pointer;
     }
 
+    /* Positioned ancestor for the invisible overlay input — without this the
+       input's position:absolute + inset:0 climbs to the nearest positioned
+       ancestor outside the component (often the whole page), so clicks
+       anywhere would toggle the switch. Matches React's .trackWrapper. */
+    .track-wrapper {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      flex-shrink: 0;
+      inline-size: var(--switch_track-width);
+      block-size: var(--switch_track-height);
+    }
+
     .input {
       position: absolute;
       inset: 0;
@@ -64,12 +108,10 @@ export class BdsSwitch extends LitElement {
     }
 
     .track {
-      --switch_thumb-size: 1.25em;
-      --switch_track-pad: var(--bds-space_xxxs);
-      --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
-      --switch_track-width: calc(var(--switch_thumb-size) * 2 + var(--switch_track-pad) * 2);
-
-      position: relative;
+      /* Shadow DOM does not inherit the global box-sizing reset — without this
+         the padding-inline is added on top of inline-size (content-box), so the
+         thumb's checked translate falls short of the track end. */
+      box-sizing: border-box;
       display: inline-flex;
       align-items: center;
       inline-size: var(--switch_track-width);
@@ -96,6 +138,12 @@ export class BdsSwitch extends LitElement {
       transform: translateX(0);
     }
 
+    /* Error state — lower specificity than :checked below, so a checked
+       switch still shows the active colour even when it also has an error. */
+    :host([error]) .track {
+      --bdc_color: var(--switch_border-color--error, var(--bds-color_error));
+    }
+
     .input:checked + .track {
       background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
       --bdc_color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
@@ -130,6 +178,8 @@ export class BdsSwitch extends LitElement {
     checked:  { type: Boolean, reflect: true },
     required: { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },
+    error:    { type: String, reflect: true },
+    size:     { type: String, reflect: true },
   };
 
   declare name: string;
@@ -137,9 +187,12 @@ export class BdsSwitch extends LitElement {
   declare checked: boolean;
   declare required: boolean;
   declare disabled: boolean;
+  declare error: string | undefined;
+  declare size: 'small' | 'medium' | 'large';
 
   private _internals!: ElementInternals;
   private readonly _uid = Math.random().toString(36).slice(2, 8);
+  private _initialChecked = false;
 
   constructor() {
     super();
@@ -149,6 +202,12 @@ export class BdsSwitch extends LitElement {
     this.checked = false;
     this.required = false;
     this.disabled = false;
+    this.size = 'medium';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._initialChecked = this.checked;
   }
 
   updated(changed: Map<string, unknown>) {
@@ -159,30 +218,38 @@ export class BdsSwitch extends LitElement {
   }
 
   formResetCallback() {
-    this.checked = false;
-    this._internals.setFormValue?.(null);
+    this.checked = this._initialChecked;
+    this._internals.setFormValue?.(this.checked ? this.value : null);
   }
 
   private _handleChange(e: Event) {
     this.checked = (e.target as HTMLInputElement).checked;
+    this.dispatchEvent(new CustomEvent('bds-change', {
+      detail: { checked: this.checked },
+      bubbles: true,
+      composed: true,
+    }));
   }
 
   render() {
     const id = `bds-switch-${this._uid}`;
     return html`
       <label for=${id}>
-        <input
-          id=${id}
-          type="checkbox"
-          role="switch"
-          class="input"
-          .checked=${this.checked}
-          ?required=${this.required}
-          ?disabled=${this.disabled}
-          @change=${this._handleChange}
-        />
-        <span class="track">
-          <span class="thumb"></span>
+        <span class="track-wrapper">
+          <input
+            id=${id}
+            type="checkbox"
+            role="switch"
+            class="input"
+            .checked=${this.checked}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            aria-invalid=${this.error ? 'true' : 'false'}
+            @change=${this._handleChange}
+          />
+          <span class="track">
+            <span class="thumb"></span>
+          </span>
         </span>
         <slot></slot>
       </label>

package/src/web-components/interaction/form/bds-textarea.spec.ts

@@ -52,4 +52,75 @@ describe('bds-textarea', () => {
   it('is form-associated', () => {
     expect(BdsTextarea.formAssociated).toBe(true);
   });
+
+  it('renders a label associated with the textarea via for/id', async () => {
+    const el = await fixture('<bds-textarea name="message" label="Message"></bds-textarea>');
+    const textarea = el.shadowRoot!.querySelector<HTMLTextAreaElement>('textarea')!;
+    const label = el.shadowRoot!.querySelector('label')!;
+    expect(label.textContent?.trim()).toContain('Message');
+    expect(textarea.id).toBeTruthy();
+    expect(label.getAttribute('for')).toBe(textarea.id);
+    cleanup(el);
+  });
+
+  it('renders no label when label attribute is unset', async () => {
+    const el = await fixture('<bds-textarea name="message"></bds-textarea>');
+    expect(el.shadowRoot!.querySelector('label')).toBeNull();
+    cleanup(el);
+  });
+
+  it('sets aria-invalid and renders an error message when error is set', async () => {
+    const el = await fixture('<bds-textarea name="message" error="Message is required"></bds-textarea>');
+    const textarea = el.shadowRoot!.querySelector<HTMLTextAreaElement>('textarea')!;
+    const errorMsg = el.shadowRoot!.querySelector('.message--error');
+    expect(textarea.getAttribute('aria-invalid')).toBe('true');
+    expect(errorMsg?.textContent?.trim()).toBe('Message is required');
+    expect(textarea.getAttribute('aria-describedby')).toBe(errorMsg!.id);
+    cleanup(el);
+  });
+
+  it('renders a hint message when hint is set (no error)', async () => {
+    const el = await fixture('<bds-textarea name="message" hint="Max 200 characters"></bds-textarea>');
+    const textarea = el.shadowRoot!.querySelector<HTMLTextAreaElement>('textarea')!;
+    const hint = el.shadowRoot!.querySelector('.message--hint');
+    expect(hint?.textContent?.trim()).toBe('Max 200 characters');
+    expect(textarea.getAttribute('aria-describedby')).toBe(hint!.id);
+    cleanup(el);
+  });
+
+  it('fires bds-input on keystroke with the current value in detail', async () => {
+    const el = await fixture('<bds-textarea name="message"></bds-textarea>');
+    const values: string[] = [];
+    el.addEventListener('bds-input', (e: Event) => {
+      values.push((e as CustomEvent).detail.value);
+    });
+    const textarea = el.shadowRoot!.querySelector<HTMLTextAreaElement>('textarea')!;
+    textarea.value = 'Hi';
+    textarea.dispatchEvent(new Event('input', { bubbles: true }));
+    expect(values).toEqual(['Hi']);
+    cleanup(el);
+  });
+
+  it('fires a composed bds-change event that crosses the shadow boundary', async () => {
+    const el = await fixture('<bds-textarea name="message"></bds-textarea>');
+    const values: string[] = [];
+    // A native `change` on the inner textarea is not composed and never
+    // reaches a listener on the host; `bds-change` is re-dispatched so it does.
+    el.addEventListener('bds-change', (e: Event) => {
+      values.push((e as CustomEvent).detail.value);
+    });
+    const textarea = el.shadowRoot!.querySelector<HTMLTextAreaElement>('textarea')!;
+    textarea.value = 'Hello world';
+    textarea.dispatchEvent(new Event('change', { bubbles: true }));
+    expect(values).toEqual(['Hello world']);
+    cleanup(el);
+  });
+
+  it('restores the initial value on form reset', async () => {
+    const el = await fixture('<bds-textarea name="message" value="Initial text"></bds-textarea>') as BdsTextarea;
+    el.value = 'Something else entirely';
+    el.formResetCallback();
+    expect(el.value).toBe('Initial text');
+    cleanup(el);
+  });
 });

package/src/web-components/interaction/form/bds-textarea.ts

@@ -11,20 +11,33 @@ import { LitElement, css, html } from 'lit';
  *   value       — text value
  *   placeholder — placeholder text
  *   rows        — number of visible rows (default: 4)
+ *   label       — visible label text
+ *   hint        — helper text shown below the textarea
+ *   error       — error message; when set the textarea enters error state
  *   required    — boolean
  *   disabled    — boolean
  *
  * Events:
- *   input  — native input event
- *   change — native change event
+ *   bds-input  — fired on every keystroke; `detail: { value: string }`
+ *   bds-change — fired when the value is committed; `detail: { value: string }`
  *
  * @example
- * <bds-textarea name="message" placeholder="Enter message…" rows="6"></bds-textarea>
+ * <bds-textarea name="message" label="Message" placeholder="Enter message…" rows="6"></bds-textarea>
  */
 export class BdsTextarea extends LitElement {
   static formAssociated = true;
 
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: block;
     }
@@ -34,14 +47,28 @@ export class BdsTextarea extends LitElement {
       pointer-events: none;
     }
 
+    .label {
+      display: block;
+      font-size: var(--bds-font_size--body--s);
+      font-family: var(--bds-font_family--body);
+      font-weight: var(--bds-font_weight--semibold);
+      color: var(--bds-color_on-bg);
+      margin-block-end: var(--bds-space_xxs);
+    }
+
+    .required {
+      color: var(--bds-color_error);
+      margin-inline-start: var(--bds-space_xxxs);
+    }
+
     .textarea {
       inline-size: 100%;
       font-family: var(--bds-font_family--body);
       font-size: var(--bds-font_size--body);
       line-height: var(--bds-font_line-height--body);
       padding: var(--bds-space_s);
-      border: none;
-      --bdc_color: var(--textarea_border-color, currentcolor);
+      border: var(--textarea_border, none);
+      --bdc_color: currentcolor;
       --bdc-outline_radius: var(--bdc-outline_radius--l);
 
       border-radius: var(--textarea_radius, var(--bdc-outline_radius));
@@ -69,6 +96,29 @@ export class BdsTextarea extends LitElement {
       cursor: not-allowed;
       resize: none;
     }
+
+    :host([error]) .textarea {
+      --bdc_color: var(--bdc_color--error);
+    }
+
+    :host([error]) .textarea:focus {
+      --bdc_color: var(--bdc_color--error);
+    }
+
+    .message {
+      margin-block-start: var(--bds-space_xxs);
+      font-size: var(--bds-font_size--body--s);
+      font-family: var(--bds-font_family--body);
+    }
+
+    .message--error {
+      color: var(--bds-color_error);
+    }
+
+    .message--hint {
+      color: var(--bds-color_on-bg--subtle);
+      font-style: italic;
+    }
   `;
 
   static properties = {
@@ -76,6 +126,9 @@ export class BdsTextarea extends LitElement {
     value:       { type: String },
     placeholder: { type: String },
     rows:        { type: Number },
+    label:       { type: String },
+    hint:        { type: String },
+    error:       { type: String, reflect: true },
     required:    { type: Boolean, reflect: true },
     disabled:    { type: Boolean, reflect: true },
   };
@@ -84,10 +137,15 @@ export class BdsTextarea extends LitElement {
   declare value: string;
   declare placeholder: string;
   declare rows: number;
+  declare label: string;
+  declare hint: string | undefined;
+  declare error: string | undefined;
   declare required: boolean;
   declare disabled: boolean;
 
   private _internals!: ElementInternals;
+  private readonly _uid = Math.random().toString(36).slice(2, 8);
+  private _initialValue = '';
 
   constructor() {
     super();
@@ -96,10 +154,16 @@ export class BdsTextarea extends LitElement {
     this.value = '';
     this.placeholder = '';
     this.rows = 4;
+    this.label = '';
     this.required = false;
     this.disabled = false;
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    this._initialValue = this.value;
+  }
+
   updated(changed: Map<string, unknown>) {
     super.updated(changed);
     if (changed.has('value')) {
@@ -108,17 +172,45 @@ export class BdsTextarea extends LitElement {
   }
 
   formResetCallback() {
-    this.value = '';
-    this._internals.setFormValue?.(null);
+    this.value = this._initialValue;
+    this._internals.setFormValue?.(this.value || null);
   }
 
   private _handleInput(e: Event) {
     this.value = (e.target as HTMLTextAreaElement).value;
+    this.dispatchEvent(new CustomEvent('bds-input', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private _handleChange(e: Event) {
+    this.value = (e.target as HTMLTextAreaElement).value;
+    this.dispatchEvent(new CustomEvent('bds-change', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true,
+    }));
   }
 
   render() {
+    const id = `bds-textarea-${this._uid}`;
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    const describedBy = [this.error && errorId, this.hint && hintId].filter(Boolean).join(' ') || undefined;
+
     return html`
+      ${this.label
+        ? html`
+            <label class="label" for=${id}>
+              ${this.label}
+              ${this.required ? html`<span class="required" aria-hidden="true">*</span>` : ''}
+            </label>
+          `
+        : ''}
       <textarea
+        id=${id}
         class="textarea"
         name=${this.name}
         .value=${this.value}
@@ -126,8 +218,17 @@ export class BdsTextarea extends LitElement {
         rows=${this.rows}
         ?required=${this.required}
         ?disabled=${this.disabled}
+        aria-invalid=${this.error ? 'true' : 'false'}
+        aria-describedby=${describedBy ?? ''}
+        aria-required=${this.required ? 'true' : 'false'}
         @input=${this._handleInput}
+        @change=${this._handleChange}
       ></textarea>
+      ${this.error
+        ? html`<p id=${errorId} class="message message--error" role="alert">${this.error}</p>`
+        : this.hint
+          ? html`<p id=${hintId} class="message message--hint">${this.hint}</p>`
+          : ''}
     `;
   }
 }

package/src/web-components/layout/BdsGrid.mdx

@@ -50,6 +50,7 @@ Numeric `column-span="n"` is literal — it does not adapt. Use named values for
 | `is-masonry`      | boolean                                        | `false`  | Enables masonry layout (CSS Grid Level 3 "grid-lanes"). Uses native CSS when supported, otherwise runs a JS polyfill. |
 | `auto-span-media` | boolean                                        | `false`  | Child `<bds-grid-item>`s without an explicit `column-span` resolve their span from the intrinsic aspect ratio of their first `<img>`/`<video>` descendant. See [Aspect-ratio auto-span](#aspect-ratio-auto-span). |
 | `masonry-preferred-column-span` | named span \| number             | —        | In masonry mode, items without an explicit `column-span` try to span this value, demoting to fit at row ends. Accepts the same named values as `column-span` (`"half"`, `"one-third"`, etc.). See [Masonry preferred column span](#masonry-preferred-column-span). |
+| `masonry-row-unit-px` | number                                     | —        | Masonry only. Manual override for the row-track unit (px) the polyfill uses for `grid-auto-rows` and as the ceil() granularity of each item's row span. Omit to let the polyfill auto-pick the smallest unit that keeps the implicit row count under any browser cap. |
 
 ## Slots
 
@@ -75,7 +76,7 @@ Numeric `column-span="n"` is literal — it does not adapt. Use named values for
 
 ## Nesting
 
-Grids can nest. A `variant="page"` inside another grid uses `grid-column: 1 / -1` so nested page grids always occupy the full width of their container.
+Grids can nest. A `variant="page"` inside another grid uses `grid-column: 1 / -1` so nested page grids always occupy the full width of their container. Because `<bds-grid>` renders its track layout inside a shadow root, the spanning rule is applied to the **host element** itself (`:host([variant='page'])`) rather than the internal `.grid` div — the host is the element that actually participates in the parent grid's tracks.
 
 ```html
 <bds-grid variant="main">
@@ -118,7 +119,9 @@ Targets [CSS Grid Layout Module Level 3](https://www.w3.org/TR/css-grid-3/) ("gr
 - **Native path** — when the browser supports `display: grid-lanes` or `grid-template-rows: masonry`, CSS handles everything and the polyfill short-circuits.
 - **Polyfill path** — row-span packing: the container collapses to a 1 px row track with `grid-auto-flow: dense`, and each item is given `grid-row-end: span ceil(height + gap)`. Items stay in **normal flow** (no absolute positioning), so surrounding content lays out correctly around the grid.
 
-Re-runs on child size changes (`ResizeObserver` on each child) and child addition/removal (`MutationObserver` on the host). The container itself is not observed to avoid a feedback loop — setting row-spans changes the container's block-size.
+Re-runs on child size changes (`ResizeObserver` on each child, and on any `<img>`/`<video>` descendant so late-decoding media is caught the same frame) and child addition/removal (`MutationObserver` on the host). The container itself is not observed to avoid a feedback loop — setting row-spans changes the container's block-size.
+
+A `ResizeObserver`-triggered re-run applies immediately, except while the page is actively scrolling — those are deferred until scroll idles (150ms) to avoid a compositor race where the re-pack visibly overlaps already-painted content. `MutationObserver`-triggered runs (new children) and the initial layout are always deferred one frame via `requestAnimationFrame` so the browser lays out new content before it's measured. Masonry re-engages automatically if the element is disconnected and reconnected (e.g. moved in the DOM).
 
 ### Span behavior in masonry
 
@@ -131,6 +134,7 @@ Re-runs on child size changes (`ResizeObserver` on each child) and child additio
 - Initial layout is one measure pass + one write pass (heights are batched to avoid per-item reflows).
 - Re-layout is scheduled via `requestAnimationFrame` so bursts of observer callbacks coalesce into a single run per frame.
 - Row-gap is baked into each item's span, so ceil-rounding only introduces sub-pixel overshoot per item — not visible in practice.
+- Set `masonry-row-unit-px` to override the auto-picked row-track unit if you've confirmed the auto-tuner is wrong for your gallery (see [Attributes](#attributes)).
 
 ### Accessibility
 

package/src/web-components/layout/BdsGrid.stories.tsx

@@ -10,6 +10,7 @@ function BdsGrid({
   isCentered,
   isMasonry,
   masonryPreferredColumnSpan,
+  masonryRowUnitPx,
   children,
 }: {
   variant?: GridVariant;
@@ -17,6 +18,7 @@ function BdsGrid({
   isCentered?: boolean;
   isMasonry?: boolean;
   masonryPreferredColumnSpan?: string;
+  masonryRowUnitPx?: number;
   children?: React.ReactNode;
 }) {
   return React.createElement(
@@ -27,6 +29,7 @@ function BdsGrid({
       'is-centered': isCentered || undefined,
       'is-masonry': isMasonry || undefined,
       'masonry-preferred-column-span': masonryPreferredColumnSpan,
+      'masonry-row-unit-px': masonryRowUnitPx,
     },
     children,
   );
@@ -78,6 +81,7 @@ const meta = {
       control: 'select',
       options: ['full', 'three-quarters', 'two-thirds', 'half', 'one-third', 'one-quarter'],
     },
+    masonryRowUnitPx: { control: 'number' },
   },
 } satisfies Meta<typeof BdsGrid>;
 

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

@@ -48,6 +48,27 @@ describe('bds-grid-item', () => {
     cleanup(el);
   });
 
+  it('restores default span after row-span attribute is removed', async () => {
+    const el = (await fixture('<bds-grid-item row-span="2"></bds-grid-item>')) as BdsGridItem;
+    expect(el.style.gridRow).toBe('span 2');
+    el.removeAttribute('row-span');
+    await el.updateComplete;
+    expect(el.style.gridRow).toBe('');
+    cleanup(el);
+  });
+
+  it('restores default full-span column after start-column/end-column are removed', async () => {
+    const el = (await fixture(
+      '<bds-grid-item start-column="2" end-column="5"></bds-grid-item>',
+    )) as BdsGridItem;
+    expect(el.style.gridColumn).toBe('2 / 5');
+    el.removeAttribute('start-column');
+    el.removeAttribute('end-column');
+    await el.updateComplete;
+    expect(el.style.gridColumn).toBe('var(--bds-grid_span-100)');
+    cleanup(el);
+  });
+
   it('renders slotted children', async () => {
     const el = await fixture('<bds-grid-item>cell</bds-grid-item>');
     expect(el.textContent?.trim()).toBe('cell');

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

@@ -55,6 +55,16 @@ function resolveSpan(value: Exclude<GridItemSpanValue, 'auto'> | undefined): str
  */
 export class BdsGridItem extends LitElement {
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: block;
       min-inline-size: 0;
@@ -151,8 +161,12 @@ export class BdsGridItem extends LitElement {
     const effective = this._effectiveColumnSpan();
     if (effective === 'auto') this._resolveAutoSpan();
 
-    const hasExplicitRange =
-      this.startColumn !== undefined || this.endColumn !== undefined;
+    // Lit's default `Number` attribute converter resolves a removed attribute
+    // to `null` (not `undefined`), so these checks must use `!= null` — an
+    // `!== undefined` check would keep treating a removed attribute as "set"
+    // and produce `span null` / a stuck explicit range instead of restoring
+    // the default span behaviour.
+    const hasExplicitRange = this.startColumn != null || this.endColumn != null;
 
     const resolved = effective === 'auto' ? this._autoSpan : effective;
     const gridColumn = hasExplicitRange
@@ -160,7 +174,7 @@ export class BdsGridItem extends LitElement {
       : resolveSpan(resolved);
 
     this.style.gridColumn = gridColumn;
-    this.style.gridRow = this.rowSpan !== undefined ? `span ${this.rowSpan}` : '';
+    this.style.gridRow = this.rowSpan != null ? `span ${this.rowSpan}` : '';
 
     // Marker the masonry polyfill reads to know this item's span wasn't set by
     // the consumer — it may override with the parent `masonry-preferred-column-span`.