### Start Development Server

Source: https://github.com/khang-nd/7.css/blob/main/README.md

Run this command to start a development environment that watches for file changes and rebuilds the project, automatically reloading the browser.

```sh
npm start
```

--------------------------------

### Install 7.css via npm

Source: https://github.com/khang-nd/7.css/blob/main/README.md

Install the 7.css package using npm for use in your project.

```sh
npm install 7.css
```

--------------------------------

### Import 7.css in JavaScript

Source: https://github.com/khang-nd/7.css/blob/main/README.md

Import the 7.css stylesheet after installing it via npm to apply the styles.

```javascript
import "7.css/dist/7.css";
```

--------------------------------

### HTML SearchBox Examples

Source: https://context7.com/khang-nd/7.css/llms.txt

Implement instant search inputs or button-triggered search interfaces. Use a simple input for instant search or pair an input with a button for a traditional search box.

```html
<input type="search" placeholder="Search..." />
```

```html
<div class="searchbox">
  <input type="search" placeholder="Search..." />
  <button aria-label="search"></button>
</div>
```

--------------------------------

### HTML Menu Examples

Source: https://context7.com/khang-nd/7.css/llms.txt

Create context menus and dropdown menus with submenus, dividers, disabled items, icons, and radio/checkbox options using semantic HTML structure and 7.css classes.

```html
<ul role="menu" class="can-hover" style="width: 200px">
  <li role="menuitem" tabindex="0" aria-haspopup="true">
    Sort by
    <ul role="menu">
      <li role="menuitem"><a href="#">Name</a></li>
      <li role="menuitem"><a href="#">Size</a></li>
      <li role="menuitem"><a href="#">Date modified</a></li>
    </ul>
  </li>
  <li role="menuitem" class="has-divider"><a href="#">Refresh</a></li>
  <li role="menuitem" aria-disabled="true"><a href="#">Paste (disabled)</a></li>
  <li role="menuitem">
    <img src="icon.png" alt="" />
    <a href="#">Settings</a>
  </li>
</ul>
```

```html
<ul role="menu" style="width: 200px">
  <li role="menuitem">
    <input type="radio" name="view" id="view-large">
    <label for="view-large">Large icons</label>
  </li>
  <li role="menuitem">
    <input type="radio" name="view" id="view-medium" checked>
    <label for="view-medium">Medium icons</label>
  </li>
  <li role="menuitem" class="has-divider">
    <input type="radio" name="view" id="view-small">
    <label for="view-small">Small icons</label>
  </li>
  <li role="menuitem">
    <input type="checkbox" id="auto-arrange">
    <label for="auto-arrange">Auto arrange</label>
  </li>
</ul>
```

--------------------------------

### HTML GroupBox Examples

Source: https://context7.com/khang-nd/7.css/llms.txt

Use the fieldset element with a legend or the 'group' utility class to organize related controls.

```html
<fieldset>
  <legend>User Preferences</legend>
  <div>
    <input id="pref1" type="radio" name="prefs">
    <label for="pref1">Option A</label>
  </div>
  <div>
    <input id="pref2" type="radio" name="prefs">
    <label for="pref2">Option B</label>
  </div>
  <div>
    <input id="pref3" type="radio" name="prefs">
    <label for="pref3">Option C</label>
  </div>
</fieldset>
```

```html
<div class="group">
  <div>
    <input type="checkbox" id="grp1" checked>
    <label for="grp1">First option</label>
  </div>
  <div>
    <input type="checkbox" id="grp2">
    <label for="grp2">Second option</label>
  </div>
</div>
```

--------------------------------

### HTML Scrollbar Example

Source: https://context7.com/khang-nd/7.css/llms.txt

Apply Windows 7-style scrollbars to scrollable containers using the `has-scrollbar` class. Ensure the container has `overflow: auto` or `overflow: scroll` and defined dimensions.

```html
<div class="has-scrollbar" style="width: 300px; height: 150px; overflow: auto">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  In nibh massa, viverra non velit vitae, scelerisque venenatis risus.
  Sed posuere risus tellus, sit amet vehicula nunc venenatis ut.
  Nunc convallis augue eget odio imperdiet, eu consequat massa fringilla.</p>
  <p>Additional content to demonstrate scrolling behavior...</p>
</div>
```

--------------------------------

### HTML Slider Examples

Source: https://context7.com/khang-nd/7.css/llms.txt

Render range inputs as trackbar controls. Supports horizontal and vertical orientations, with optional box indicators and labels.

```html
<div style="display: flex; align-items: center; gap: 0.5rem; max-width: 300px">
  <label>Volume:</label>
  <label>Low</label>
  <input type="range" min="1" max="11" value="5" />
  <label>High</label>
</div>
```

```html
<div style="display: flex; align-items: center; gap: 0.5rem">
  <label>Level</label>
  <div class="is-vertical">
    <input class="has-box-indicator" type="range" min="1" max="5" step="1" value="3" />
  </div>
</div>
```

--------------------------------

### HTML Balloon (Tooltip) Examples

Source: https://context7.com/khang-nd/7.css/llms.txt

Display non-critical information in pop-up tooltips with configurable positioning. Use the `role="tooltip"` attribute and optional positioning classes like `is-bottom` and `is-right`.

```html
<div role="tooltip">This is helpful information.</div>
```

```html
<input type="text" placeholder="Enter password" aria-describedby="password-tip" />
<div role="tooltip" id="password-tip" hidden>Password must be 8+ characters</div>
```

```html
<div role="tooltip" class="is-bottom is-right">Bottom right (default)</div>
<div role="tooltip" class="is-bottom is-left">Bottom left</div>
<div role="tooltip" class="is-top is-left">Top left</div>
<div role="tooltip" class="is-top is-right">Top right</div>
```

--------------------------------

### Build 7.css

Source: https://github.com/khang-nd/7.css/blob/main/README.md

Execute this command to manually build the project files, outputting them to the `dist/` directory.

```sh
npm run build
```

--------------------------------

### Basic Window Component

Source: https://context7.com/khang-nd/7.css/llms.txt

Create a standard Windows 7-style application window with a title bar, control buttons, and a content body. The 'active' class indicates the window is in focus.

```html
<!-- Basic window with title bar and body -->
<div class="window active" style="width: 300px">
  <div class="title-bar">
    <div class="title-bar-text">My Application</div>
    <div class="title-bar-controls">
      <button aria-label="Minimize"></button>
      <button aria-label="Maximize"></button>
      <button aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body has-space">
    <p>Window content goes here!</p>
    <section style="display: flex; justify-content: flex-end; gap: 6px">
      <button class="default">OK</button>
      <button>Cancel</button>
    </section>
  </div>
</div>
```

--------------------------------

### Include 7.css via CDN

Source: https://context7.com/khang-nd/7.css/llms.txt

Include the 7.css stylesheet in your HTML head to apply Windows 7 styles. This method requires no build step.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>7.css example</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://unpkg.com/7.css" />
  </head>
  <body>
    <div class="window" style="margin: 32px; width: 250px">
      <div class="title-bar">
        <div class="title-bar-text">My First Program</div>
      </div>
      <div class="window-body">
        <p>Hello, world!</p>
      </div>
    </div>
  </body>
</html>
```

--------------------------------

### Import Individual Components via CDN

Source: https://context7.com/khang-nd/7.css/llms.txt

Import specific component stylesheets from the CDN to reduce bundle size when only certain UI elements are needed.

```html
<!-- Via CDN -->
<link rel="stylesheet" href="https://unpkg.com/7.css/dist/gui/buttons.css" />
<link rel="stylesheet" href="https://unpkg.com/7.css/dist/gui/tabs.css" />
```

--------------------------------

### Create Dropdown Lists

Source: https://context7.com/khang-nd/7.css/llms.txt

Implement drop-down list boxes for single-item selection from a list of options. Includes styling for basic and disabled dropdowns.

```html
<!-- Basic dropdown -->
<select>
  <option>5 - Incredible!</option>
  <option>4 - Great!</option>
  <option selected>3 - Pretty good</option>
  <option>2 - Not so great</option>
  <option>1 - Unfortunate</option>
</select>
```

```html
<!-- Disabled dropdown -->
<select disabled>
  <option>Selection unavailable</option>
</select>
```

--------------------------------

### Include 7.css via CDN

Source: https://github.com/khang-nd/7.css/blob/main/README.md

Link to the 7.css stylesheet in the head of your HTML document to apply Windows 7 styles.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>7.css example</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://unpkg.com/7.css" />
  </head>

  <body>
    <div class="window" style="margin: 32px; width: 250px">
      <div class="title-bar">
        <div class="title-bar-text">My First Program</div>
      </div>
      <div class="window-body">
        <p>Hello, world!</p>
      </div>
    </div>
  </body>
</html>
```

--------------------------------

### Import Individual Components via npm

Source: https://context7.com/khang-nd/7.css/llms.txt

Import specific component CSS files via npm to enable tree-shaking and reduce bundle size in your project.

```javascript
// Via npm
import "7.css/dist/gui/buttons.css";
import "7.css/dist/gui/tabs.css";
```

--------------------------------

### Style Various Button Types

Source: https://context7.com/khang-nd/7.css/llms.txt

Render command buttons with different states like default, pressed, focused, and disabled. This also includes styling for file input buttons.

```html
<!-- Standard button -->
<button>Click me</button>
```

```html
<!-- Default/primary button (responds to Enter key) -->
<button class="default">Submit</button>
```

```html
<!-- Disabled button -->
<button disabled>Cannot click</button>
```

```html
<!-- Focused state (for demonstration) -->
<button class="focused">I am focused</button>
```

```html
<!-- Active/pressed state (for demonstration) -->
<button class="active">Being pressed</button>
```

```html
<!-- Styled file input -->
<input type="file" />
```

```html
<!-- File input with full button styles -->
<label role="button" tabindex="0" class="default">
  <input type="file" />
  Browse...
</label>
```

--------------------------------

### Create Accessible Dialog Boxes with URL Fragments

Source: https://context7.com/khang-nd/7.css/llms.txt

Implement modal dialogs that can be opened using URL fragments, eliminating the need for JavaScript. Ensure accessibility by using ARIA attributes.

```html
<!-- Trigger link -->
<a href="#my-dialog">Open Dialog</a>

<!-- Dialog box -->
<div class="window active is-bright" id="my-dialog" role="dialog" aria-labelledby="dialog-title">
  <div class="title-bar">
    <div class="title-bar-text" id="dialog-title">Confirm Action</div>
    <div class="title-bar-controls">
      <button aria-label="Close" onclick="history.back()"> </button>
    </div>
  </div>
  <div class="window-body has-space">
    <h2 class="instruction instruction-primary">Are you sure?</h2>
    <p>This action cannot be undone.</p>
  </div>
  <footer style="text-align: right; padding: 8px;">
    <button class="default">Yes</button>
    <button onclick="history.back()">Cancel</button>
  </footer>
</div>
```

--------------------------------

### Use Scoped Styling via CDN

Source: https://context7.com/khang-nd/7.css/llms.txt

Include the scoped stylesheet via CDN and wrap your components with the `.win7` class to limit 7.css styles.

```html
<!-- Use scoped stylesheet via CDN -->
<link rel="stylesheet" href="https://unpkg.com/7.css/dist/7.scoped.css" />

<!-- Or import via npm -->
<script>
import "7.css/dist/7.scoped.css";
</script>

<!-- Wrap components with .win7 class -->
<div class="win7">
  <button>A Win7-styled button</button>
</div>
```

--------------------------------

### Style Text Inputs and Textareas

Source: https://context7.com/khang-nd/7.css/llms.txt

Render single-line text inputs and multi-line textareas with proper labeling. The `group` class can be used for stacked label and input elements.

```html
<!-- Single-line text input -->
<label for="username">Username</label>
<input id="username" type="text" />
```

```html
<!-- Stacked label and input using group class -->
<div class="group" style="width: 200px">
  <label for="address1">Address (Line 1)</label>
  <input id="address1" type="text" />
</div>
```

```html
<!-- Multi-line textarea -->
<div class="group" style="width: 200px">
  <label for="notes">Additional notes</label>
  <textarea id="notes" rows="8"></textarea>
</div>
```

--------------------------------

### Glass Frame Window (Aero Effect)

Source: https://context7.com/khang-nd/7.css/llms.txt

Implement a Windows 7-style window with a glass frame effect, often referred to as the Aero effect, which blurs the background. Requires the 'glass' class in addition to 'window'.

```html
<!-- Glass frame window (aero effect) -->
<div class="window glass active" style="width: 300px">
  <div class="title-bar">
    <div class="title-bar-text">Glass Window</div>
    <div class="title-bar-controls">
      <button aria-label="Minimize"></button>
      <button aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body has-space">
    <p>The background behind is blurred.</p>
  </div>
</div>
```

--------------------------------

### Implement List Boxes for Selection

Source: https://context7.com/khang-nd/7.css/llms.txt

Display lists for multi-selection using `<select multiple>` or custom ARIA listbox patterns for enhanced accessibility and custom rendering.

```html
<!-- Simple multi-select list -->
<select multiple>
  <option>Facebook</option>
  <option selected>Amazon</option>
  <option>Apple</option>
  <option>Netflix</option>
  <option>Google</option>
</select>
```

```html
<!-- Custom listbox with ARIA roles -->
<ul role="listbox" class="has-shadow has-hover">
  <li role="option">Facebook</li>
  <li role="option" aria-selected="true">Amazon</li>
  <li role="option">Apple</li>
  <li role="option">Netflix</li>
  <li role="option">Google</li>
</ul>
```

--------------------------------

### Custom Colored Window

Source: https://context7.com/khang-nd/7.css/llms.txt

Customize the background color of a Windows 7 window by setting the `--w7-w-bg` CSS variable. This allows for unique color schemes while maintaining the Windows 7 aesthetic.

```html
<!-- Custom colored window using CSS variable -->
<div class="window active" style="width: 300px; --w7-w-bg: #805ba5;">
  <div class="title-bar">
    <div class="title-bar-text">Violet Window</div>
    <div class="title-bar-controls">
      <button aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body has-space">
    <p>Custom color via --w7-w-bg variable.</p>
  </div>
</div>
```

--------------------------------

### Status Bar Component

Source: https://context7.com/khang-nd/7.css/llms.txt

Add a status bar to the bottom of a Windows 7 window to display contextual information. It can contain multiple fields for different types of data.

```html
<div class="window" style="width: 320px">
  <div class="title-bar">
    <div class="title-bar-text">Window With Status Bar</div>
  </div>
  <div class="window-body has-space">
    <p>Main window content here.</p>
  </div>
  <div class="status-bar">
    <p class="status-bar-field">Press F1 for help</p>
    <p class="status-bar-field">Slide 1</p>
    <p class="status-bar-field">CPU Usage: 14%</p>
  </div>
</div>
```

--------------------------------

### Implement Accessible Checkboxes

Source: https://context7.com/khang-nd/7.css/llms.txt

Create independent or non-exclusive choices using checkboxes. Ensure proper labeling by matching `for` and `id` attributes between the label and input.

```html
<div class="group">
  <div>
    <input type="checkbox" id="option1">
    <label for="option1">Enable notifications</label>
  </div>
  <div>
    <input type="checkbox" id="option2" checked>
    <label for="option2">Auto-save documents</label>
  </div>
  <div>
    <input type="checkbox" id="option3" disabled>
    <label for="option3">Premium feature (disabled)</label>
  </div>
  <div>
    <input type="checkbox" id="option4" checked disabled>
    <label for="option4">Always enabled</label>
  </div>
</div>
```

--------------------------------

### HTML ProgressBar Variations

Source: https://context7.com/khang-nd/7.css/llms.txt

Display operation progress with various states including determinate, paused, error, animated, and indeterminate (marquee) modes. Use ARIA attributes for accessibility.

```html
<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80">
  <div style="width: 80%"></div>
</div>
```

```html
<div role="progressbar" class="paused">
  <div style="width: 50%"></div>
</div>
```

```html
<div role="progressbar" class="error">
  <div style="width: 30%"></div>
</div>
```

```html
<div role="progressbar" class="animate">
  <div style="width: 60%"></div>
</div>
```

```html
<div role="progressbar" class="marquee"></div>
```

--------------------------------

### HTML TreeView Component

Source: https://context7.com/khang-nd/7.css/llms.txt

Display hierarchical data using an indented outline with collapsible sections. Utilizes details and summary elements for interactive behavior.

```html
<ul class="tree-view has-collapse-button has-connector has-container">
  <li>Documents</li>
  <li>
    <details open>
      <summary>Projects</summary>
      <ul>
        <li>Project A</li>
        <li>
          <details>
            <summary>Project B</summary>
            <ul>
              <li>Source Files</li>
              <li>Assets</li>
              <li>Documentation</li>
            </ul>
          </details>
        </li>
        <li>Project C</li>
      </ul>
    </details>
  </li>
  <li>Downloads</li>
</ul>
```

--------------------------------

### HTML Tabs Component

Source: https://context7.com/khang-nd/7.css/llms.txt

Implement tabbed interfaces using ARIA tab roles. Supports disabled states and justified layouts. Ensure ARIA attributes are correctly set for accessibility.

```html
<section class="tabs" style="max-width: 500px">
  <menu role="tablist" aria-label="Settings Tabs">
    <button role="tab" aria-controls="tab-general" aria-selected="true">General</button>
    <button role="tab" aria-controls="tab-advanced">Advanced</button>
    <button role="tab" aria-controls="tab-about">About</button>
    <button role="tab" aria-controls="tab-disabled" disabled>Disabled</button>
  </menu>

  <article role="tabpanel" id="tab-general">
    <h3>General Settings</h3>
    <p>Configure basic application preferences here.</p>
  </article>

  <article role="tabpanel" id="tab-advanced" hidden>
    <h3>Advanced Settings</h3>
    <p>Power user configuration options.</p>
  </article>

  <article role="tabpanel" id="tab-about" hidden>
    <h3>About</h3>
    <p>Application version and credits.</p>
  </article>

  <article role="tabpanel" id="tab-disabled" hidden>
    <p>This tab is disabled.</p>
  </article>
</section>
```

--------------------------------

### Create Mutually Exclusive Radio Buttons

Source: https://context7.com/khang-nd/7.css/llms.txt

Group related radio buttons using a shared `name` attribute to ensure only one option can be selected within the group.

```html
<div style="display: flex; flex-direction: column; gap: 6px">
  <div>
    <input id="size-small" type="radio" name="size-group">
    <label for="size-small">Small</label>
  </div>
  <div>
    <input id="size-medium" type="radio" name="size-group" checked>
    <label for="size-medium">Medium</label>
  </div>
  <div>
    <input id="size-large" type="radio" name="size-group">
    <label for="size-large">Large</label>
  </div>
  <div>
    <input id="size-xl" type="radio" name="size-group" disabled>
    <label for="size-xl">Extra Large (unavailable)</label>
  </div>
</div>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.