@vibe-labs/design-components-responsive

Framework-agnostic responsive layout components for the Vibe Design System. Provides container, grid, and stack components with container-query-based responsive behaviour via data attributes.

Usage

@import "@vibe-labs/design-components-responsive";

import type { ResponsiveGridStyleProps } from "@vibe-labs/design-components-responsive/types";

Contents

Tokens (responsive.css)

Component-specific tokens in @layer vibe.tokens:

Token	Default	Purpose
--responsive-grid-gap	var(--space-4)	Grid default gap
--responsive-stack-gap	var(--space-4)	Stack default gap

Generated Component CSS (responsive.g.css)

All styles in @layer vibe.components.

---

Responsive Container

Establishes a container query context. Defaults to inline-size (the common case).

<!-- Basic — inline-size container -->
<div class="responsive-container">...</div>

<!-- Named container -->
<div class="responsive-container" data-name="sidebar">...</div>

<!-- Size container (both axes) -->
<div class="responsive-container" data-type="size">...</div>

Base class: .responsive-container

Attribute	Values	Default
data-type	inline · size · normal	inline
data-name	main · sidebar · card · panel	—

---

Responsive Grid

A 12-column grid with container-query-driven column counts. Set the default with data-cols, then override per breakpoint with data-cols-{bp}.

<div class="responsive-container">
  <div class="responsive-grid" data-cols="1" data-cols-sm="2" data-cols-lg="3" data-cols-xl="4">
    <div>Card</div>
    <div>Card</div>
    <div>Card</div>
    <div>Card</div>
  </div>
</div>

Base class: .responsive-grid

Attribute	Values	Purpose
data-cols	1–12	Default column count
data-cols-xs	1–12	Columns at xs (480px)
data-cols-sm	1–12	Columns at sm (640px)
data-cols-md	1–12	Columns at md (768px)
data-cols-lg	1–12	Columns at lg (1024px)
data-cols-xl	1–12	Columns at xl (1280px)
data-cols-2xl	1–12	Columns at 2xl (1536px)

Gap defaults to var(--responsive-grid-gap). Override with spacing utilities (.gap-2, .gap-8, etc.) or inline style.

---

Responsive Stack

Flex column by default, switches to row at the specified breakpoint. Container-query-based.

<div class="responsive-container">
  <div class="responsive-stack" data-breakpoint="md">
    <aside>Sidebar</aside>
    <main>Content</main>
  </div>
</div>

Base class: .responsive-stack

Attribute	Values	Purpose
data-breakpoint	xs · sm · md · lg · xl · 2xl	Breakpoint to switch to row

Gap defaults to var(--responsive-stack-gap). Override with spacing utilities or inline style.

---

TypeScript Types

// Breakpoints
export const Breakpoints: readonly ["xs", "sm", "md", "lg", "xl", "2xl"];
export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";

// Container
export const ContainerTypes: readonly ["inline", "size", "normal"];
export type ContainerType = "inline" | "size" | "normal";
export const ContainerNames: readonly ["main", "sidebar", "card", "panel"];
export type ContainerName = "main" | "sidebar" | "card" | "panel";
export interface ResponsiveContainerStyleProps { ... }

// Grid
export const GridColumns: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
export type GridColumn = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
export interface ResponsiveGridStyleProps { ... }

// Stack
export interface ResponsiveStackStyleProps { ... }

Dist Structure

File	Description
index.css	Barrel — imports both CSS files
responsive.css	Component token definitions
responsive.g.css	Generated component CSS
index.js	TypeScript runtime exports
index.d.ts	TypeScript type declarations

Dependencies

Runtime (CSS custom properties, not npm):

• @vibe-labs/design-spacing — --space-4 used as default gap
• @vibe-labs/design-responsive — breakpoint tokens (for documentation; values are duplicated in the generate script)

Build-time:

• .build/selectors.ts — shared base(), variant(), flag() selector helpers

Build

npm run build