🧩 Framework Agnostic (Microfrontends)

Built on native **Web Components** (using Lit), FaaW7 components work in any modern framework (React, Vue, Svelte, Angular) or even in plain HTML. This makes them perfect for **Microfrontend architectures**, where different teams can use different tech stacks without dependency conflicts, ensuring a consistent UI.

🚀 Lightweight & High-Performance

Lit is an incredibly fast and lightweight library. Unlike frameworks that use a heavy Virtual DOM, Lit uses `lit-html` to perform surgical updates directly to the DOM. This results in faster load times, smaller bundle sizes, and performance that feels native to the browser.

🎨 Nostalgic Style, Modern Customization

FaaW7 not only recreates the Windows 7 look, but does so flexibly. The entire library is customizable via **CSS Custom Properties (Variables)**. You can easily change core colors, fonts, border-radius, and gradients to fit your project's theme. For deeper changes, components also expose **CSS Shadow Parts** for granular styling.

🛡️ Robust & Accessible

Written entirely in **TypeScript**, FaaW7 offers robust, type-safe development, reducing runtime errors. Furthermore, all components are built from the ground up following **WAI-ARIA** best practices (roles, states, and properties) and ensure full keyboard navigation .

🚀 Component Gallery

A live demonstration of (almost) all components in the `faaw7-components` library. You can resize this window, move it, or open others.

Basic Controls

Sliders & Progress

Dropdowns & Accordions

What is Lit?

Lit is a simple library from Google for building fast, lightweight web components.

Are they easy to use?

Yes! Just import the component and use its HTML tag, as shown in the quick start guide.

View more details (Disclosure)

This is additional content that was hidden.

Selectors

Media & Notifications

Full Component List

This library includes all of the following components:

• Accordion
• AudioPlayer
• Button
• Checkbox
• Combobox
• ContextMenu
• CustomSlider
• Desktop
• Disclosure
• ProgressBar
• Spinner
• StatusBar
• Table
• Toast
• Tooltip
• Window

📄 Quick Start Guide

Get FaaW7 components running in your project in minutes.

1. Installation

Install the library using your preferred package manager:

# Using pnpm (recommended)
pnpm install faaw7-components

# Using npm
npm install faaw7-components

# Using yarn
yarn add faaw7-components

2. Import Components

Import the specific components you need in your main JavaScript file. This is key for **tree-shaking**: your final application will only bundle the code for the components you actually use, keeping the bundle size minimal.

// In your JS/TS file (e.g., main.js or your component)
import 'faaw7-components/faaw7-button.js';
import 'faaw7-components/faaw7-window.js';
import 'faaw7-components/faaw7-status-bar.js';

3. Use in HTML

Once imported, you can use them directly in your HTML (or in the `render()` of Lit, React, Vue, etc.) just like standard HTML tags .

<faaw7-window title="My Application">
  <div class="window-content">
    <p>Hello, world!</p>
    <faaw7-button default>
      Accept
    </faaw7-button>
  </div>
</faaw7-window>

🛠️ Developer Guide

Advanced usage, customization, framework integration, and best practices.

1. Theming with CSS Variables

The easiest way to customize FaaW7 is by overriding the root CSS variables. You can change colors, fonts, borders, and more. Place these overrides in your global stylesheet.

/* Example: Create a "dark mode" or custom theme */
:root {
  --faaw7-color-text: #eee;
  --faaw7-color-surface: #2b2b2b;
  --faaw7-gradient-bg: linear-gradient(#555, #333);
  --faaw7-color-border: #777;
  --faaw7-border-radius: 2px;
}

2. Styling with CSS Shadow Parts

For more granular, component-specific styling, components expose their internal elements via `part`. You can style these from your global CSS using the `::part()` pseudo-element.

/* Style the body of all modals */
faaw7-modal::part(body) {
  background: var(--os-window-bg, #c0c0c0);
  padding-top: 1.5rem;
}

/* Make all buttons uppercase */
faaw7-button::part(button) {
  text-transform: uppercase;
  min-width: 90px;
}

3. React Integration

Web Components work great in React! There are two key things to remember:

1. Props vs. Attributes: String, number, and boolean props can be passed as attributes.
2. Events: React cannot listen to DOM CustomEvents (like `faaw7-close`) with the `onClick` syntax. You must attach the listener manually with `useEffect` and `useRef`.

// 1. Import components (e.g., in index.js)
import 'faaw7-components/faaw7-window.js';
import 'faaw7-components/faaw7-button.js';

// 2. In your React component
import React, { useEffect, useRef } from 'react';

function MyComponent() {
  const windowRef = useRef(null);

  useEffect(() => {
    const node = windowRef.current;
    
    // Custom events are prefixed with `faaw7-`
    const handleClose = () => console.log('Window closed!');
    node.addEventListener('faaw7-close', handleClose);

    return () => {
      node.removeEventListener('faaw7-close', handleClose);
    };
  }, []);

  return (
    <faaw7-window title="Hello from React" ref={windowRef}>
      <div class="window-content">
        <p>This is a Web Component inside React.</p>
      </div>
    </faaw7-window>
  );
}