@vibe-labs/design-display

Display, position, overflow, visibility, and z-index tokens and utility classes for the Vibe Design System.

Installation

@import "@vibe-labs/design-display";

Tokens

CSS custom properties defined in @layer vibe.tokens:

Token	Value	Description
--z-base	0	Default stacking context
--z-dropdown	100	Dropdown menus
--z-sticky	200	Sticky elements
--z-overlay	300	Overlays / backdrops
--z-modal	400	Modal dialogs
--z-popover	500	Popovers / tooltips
--z-toast	600	Toast notifications

Utilities / Generated Classes

Utility classes generated into @layer vibe.utilities via the build script.

Display

.block · .inline-block · .inline · .hidden · .contents

Position

.static · .relative · .absolute · .fixed · .sticky

Inset

• Zero: .inset-0 · .inset-x-0 · .inset-y-0 · .top-0 · .right-0 · .bottom-0 · .left-0
• Auto: .inset-auto · .top-auto · .right-auto · .bottom-auto · .left-auto
• Full: .inset-full

Overflow

.overflow-{value} · .overflow-x-{value} · .overflow-y-{value} — where value is hidden | auto | scroll | visible

Visibility

.visible · .invisible

Z-Index

.z-{level} — base | dropdown | sticky | overlay | modal | popover | toast

Dist Structure

File	Description
index.css	Barrel — imports both files below
display.css	Token definitions (z-index scale)
display.g.css	Generated utility classes

Dependencies

None — this package is self-contained.

Build

npm run build

---

Usage Guide

Provides display, position, overflow, visibility, and z-index utilities for controlling how elements are rendered and stacked in the Vibe Design System.

Import

@import "@vibe-labs/design-display";

Common Patterns

1. Absolutely positioned overlay

<div class="relative">
  <img src="hero.jpg" alt="" class="block w-full" />
  <div class="absolute inset-0 bg-overlay opacity-50"></div>
  <h1 class="absolute bottom-0 left-0 p-8">Title</h1>
</div>

2. Sticky header with correct z-index

<header class="sticky top-0 z-sticky bg-base border-b border-subtle">
  Navigation
</header>

3. Modal stacking order

<div class="fixed inset-0 z-overlay overlay-scrim"></div>
<dialog class="fixed z-modal bg-modal rounded-xl p-8 shadow-2xl">
  Modal content
</dialog>

4. Tooltip above modal

<div class="fixed z-popover bg-base rounded-md p-2 shadow-lg text-sm">
  Tooltip text
</div>

5. Hide an element visually but keep in flow

<span class="invisible">Placeholder — preserves layout space</span>

6. Scrollable inner container

<div class="overflow-y-auto overflow-x-hidden" style="height: 400px;">
  <ul><!-- long content --></ul>
</div>

Token Reference

Token	Value	Stacking context
--z-base	0	Normal content
--z-dropdown	100	Dropdown menus
--z-sticky	200	Sticky headers
--z-overlay	300	Backdrop scrims
--z-modal	400	Modals
--z-popover	500	Tooltips, popovers
--z-toast	600	Toast notifications