# Blue Web

Blue Web is the base library for [Blue React](https://bruegmann.github.io/blue-react) and [Blue Blazor](https://bruegmann.github.io/blue-react). This library builds heavily on top of [Bootstrap](https://getbootstrap.com/docs/) and also provides additional solutions in CSS and JavaScript.

## Use Blue Web

Install with NPM:

```
npm i blue-web
```

[![npm version](https://img.shields.io/npm/v/blue-web)](https://www.npmjs.com/package/blue-web)

## Implementation

If you have a React or Blazor project, you should use the components of [Blue React](https://bruegmann.github.io/blue-react) or [Blue Blazor](https://bruegmann.github.io/blue-blazor). Otherwise you can also write the markup of those components directly in HTML. Check out the examples in the docs to find out how.

For the JavaScript solutions you have to import the associated file. When installed using NPM, you can do it like this:

```js
import "blue-web/dist/js/dialog.js"
import "blue-web/dist/js/progress.js"
// ...
```

**Important:** Since 1.14.0 JavaScript files are compiled as ES modules. When you embed them in HTML using the `<script>` don't forget the `type="module"` attribute.

You can also use a CDN like unpkg.com. Only recommended for testing, not for production.

```html
<script type="module" src="https://unpkg.com/blue-web@latest/dist/js/dialog.js"></script>
<script type="module" src="https://unpkg.com/blue-web@latest/dist/js/progress.js"></script>
<!-- ... -->
```

JavaScript files are compiled as ES modules. This allows you to use import functions like this:

```html
<script type="module">
    import { tell } from "https://unpkg.com/blue-web@latest/dist/js/dialog.js"
    tell("You are awesome!")
</script>
```

## Customization and theming

Since Blue Web is based on Bootstrap, you can customize many things by overriding Sass or CSS variables. For more information, see the [Bootstrap documentation](https://getbootstrap.com/docs/5.3/customize/overview/). Blue Web also provides some additional variables that you can use and override. Take a look at [dist/styles/\_variables.scss](https://github.com/bruegmann/blue-web/blob/main/dist/styles/_variables.scss) to see all of them.

Here is an example of how to override variables using Sass:

```scss
// Override Bootstrap Sass variable
$primary: tomato;

// Override Blue Web Sass variables
$theme: orange;
$theme-dark: darken(orange, 10%);

// Stylesheet for Blue Web. Already contains Bootstrap.
@import "~blue-web/dist/style";
```

An example of how to override CSS variables:

```css
:root {
    /* Override Bootstrap CSS variable */
    --bs-body-font-family: "Inter", sans-serif;

    /* Override Blue Web CSS variable */
    --blue-sidebar-bg: #333;
}
```


## Button with icon

Blue Web enhances [Bootstrap's icon link helper](https://getbootstrap.com/docs/5.3/helpers/icon-link/#example) with the `.blue-btn-icon-wrapper`
class, enabling icons to be wrapped in a `span` element.
This simplifies the integration for Blue React and Blue Blazor by allowing icons to be passed as props more easily.

```html
<button type="button" class="btn blue-btn-soft-secondary icon-link icon-link-hover">
    Hover me!
    <span class="blue-btn-icon-wrapper" aria-hidden="true"
        ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10240 10240">
            <path
                d="M1634 3023l3200-1600c186-93 386-93 572 0l3200 1600c222 111 354 324 354 573v3688c0 249-132 462-354 573L5406 9457c-186 93-386 93-572 0L1634 7857c-222-111-354-324-354-573V3596c0-249 132-462 354-573zm286 853v3408l2880 1440V5316L1920 3876zm5968-496L5120 1996 2352 3380l2768 1384 2768-1384z"
            ></path></svg
    ></span>
</button>
```



## Buttons

Blue Web added some button variants to Bootstrap's default button styles. These variants are designed to be used in conjunction with the default Bootstrap button classes.

### `.blue-btn-soft-*`

```html
<button type="button" class="btn blue-btn-soft-primary">Primary</button>
<button type="button" class="btn blue-btn-soft-secondary">Secondary</button>
<button type="button" class="btn blue-btn-soft-success">Success</button>
<button type="button" class="btn blue-btn-soft-danger">Danger</button>
<button type="button" class="btn blue-btn-soft-warning">Warning</button>
<button type="button" class="btn blue-btn-soft-info">Info</button>
<button type="button" class="btn blue-btn-soft-light">Light</button>
<button type="button" class="btn blue-btn-soft-dark">Dark</button>
```

### `.blue-btn-plain-*`

A plain variant of Bootstrap's buttons. Always use together with `.btn`!

```html
<button type="button" class="btn blue-btn-plain-primary">Primary</button>
<button type="button" class="btn blue-btn-plain-secondary">Secondary</button>
<button type="button" class="btn blue-btn-plain-success">Success</button>
<button type="button" class="btn blue-btn-plain-danger">Danger</button>
<button type="button" class="btn blue-btn-plain-warning">Warning</button>
<button type="button" class="btn blue-btn-plain-info">Info</button>
<button type="button" class="btn blue-btn-plain-light">Light</button>
<button type="button" class="btn blue-btn-plain-dark">Dark</button>
```




## Collapse

Animated collapse using HTML `details`.

```html
<details class="blue-collapse">
    <summary>
        <header class="blue-collapse-header d-flex">
            <div class="blue-collapse-chevron" aria-hidden="true">&#10095;</div>
            Collapse
        </header>
    </summary>
    Show something
</details>
```

Element with class `blue-collapse-chevron` will be rotated to `90deg` by default and if it is the first child.
If it's the last child it will rotate to `-90deg`. Since text nodes aren't considered as child elements, you should wrap your text around an element.
`<span>Collapse</span>` in this case:

```html
<details class="blue-collapse">
    <summary>
        <header class="blue-collapse-header d-flex">
            <span>Collapse</span>
            <div class="blue-collapse-chevron" aria-hidden="true">&#10094;</div>
        </header>
    </summary>
    Show something
</details>
```

You can also customize the rotation target position with the CSS variable `--blue-collapse-chevron-rotate`:

```html
<details class="blue-collapse">
    <summary>
        <header class="blue-collapse-header d-flex">
            Collapse
            <div class="blue-collapse-chevron" style="--blue-collapse-chevron-rotate: -45deg" aria-hidden="true">
                &#10094;
            </div>
        </header>
    </summary>
    Show something
</details>
```

### Combine with styling of Menu Item

```html
<details class="blue-collapse">
    <summary class="blue-collapse-header blue-menu-item btn">
        <span class="blue-menu-item-icon" aria-hidden="true">☀️</span>
        <span class="blue-menu-item-label">Parent</span>

        <svg
            xmlns="http://www.w3.org/2000/svg"
            width="1em"
            height="1em"
            fill="currentColor"
            class="blue-menu-item-dropdown-toggle blue-collapse-chevron blue-menu-item-chevron ms-auto"
            style=" display: inline-block; vertical-align: -0.125em; transition: transform 0.2s;"
            viewBox="0 0 16 16"
        >
            <path
                class="blue-sidebar-exception"
                fillRule="evenodd"
                d="M11.354 1.646a.5.5 0 010 .708L5.707 8l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0"
            ></path>
        </svg>
    </summary>
    <div class="blue-menu-item-dropdown text-body" style="--blue-menu-item-dropdown-bg: var(--bs-body-bg)">
        <button type="button" class="blue-menu-item btn">
            <span class="blue-menu-item-icon" aria-hidden="true">🌍</span>
            <span class="blue-menu-item-label">Child</span>
        </button>
        <button type="button" class="blue-menu-item btn">
            <span class="blue-menu-item-icon" aria-hidden="true">🌑</span>
            <span class="blue-menu-item-label">Child 2</span>
        </button>
    </div>
</details>
```

### Menu Item and Collapse grouped

`.blue-collapse-group` let's you group a collapse together with another UI element like a button that should come before the collapse summary.

```html
<div class="blue-collapse-group">
    <button type="button" class="blue-menu-item btn">
        <span class="blue-menu-item-icon" aria-hidden="true">☀️</span>
        <span class="blue-menu-item-label">Parent</span>
    </button>
    <details class="blue-collapse">
        <summary class="blue-collapse-header blue-menu-item btn">
            <span class="visually-hidden">Collapse sub menu</span>
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width="1em"
                height="1em"
                fill="currentColor"
                class="blue-menu-item-dropdown-toggle blue-collapse-chevron blue-menu-item-chevron ms-auto"
                style=" display: inline-block; vertical-align: -0.125em; transition: transform 0.2s;"
                viewBox="0 0 16 16"
            >
                <path
                    class="blue-sidebar-exception"
                    fillRule="evenodd"
                    d="M11.354 1.646a.5.5 0 010 .708L5.707 8l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0"
                ></path>
            </svg>
        </summary>
        <div class="blue-menu-item-dropdown text-body" style="--blue-menu-item-dropdown-bg: var(--bs-body-bg)">
            <button type="button" class="blue-menu-item btn">
                <span class="blue-menu-item-icon" aria-hidden="true">🌍</span>
                <span class="blue-menu-item-label">Child</span>
            </button>
            <button type="button" class="blue-menu-item btn">
                <span class="blue-menu-item-icon" aria-hidden="true">🌑</span>
                <span class="blue-menu-item-label">Child 2</span>
            </button>
        </div>
    </details>
</div>
```





## Container Grid

### `.blue-container-grid`

Adds container query support to Bootstrap's grid system. By default, Bootstrap's breakpoint classes only react to changes in the viewport width.
With container queries, you can apply breaks based on a custom container.

- [Read more about container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries)
- [Read more about Bootstrap's grid system](https://getbootstrap.com/docs/5.3/layout/grid/)

```html
<div class="blue-container-grid">
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-8">col-md-8</div>
    </div>
</div>
```

```html
<div
    class="blue-container-grid border-primary-subtle px-3"
    style="resize: both; overflow: auto; border: 1px dashed; width: 958px; height: 140px;"
>
    <div class="row">
        <div class="col-md-4 bg-primary-subtle border border-primary text-primary p-3 text-center">col-md-4</div>
        <div class="col-md-8 bg-primary-subtle border border-primary text-primary p-3 text-center">col-md-8</div>
    </div>
    This is a container grid. Resize the box around to see the effect.
</div>
```




## Input group

Special variant of [input group](https://getbootstrap.com/docs/5.3/forms/input-group).
The whole group will have a focus ring when an inner input is focussed. And styling for `.input-group-text` is simplified.

### Search

This variant is especially useful for search input.

```html
<div class="blue-input-group input-group">
    <label for="529142a0-0ba9-4e54-aec6-e45902aca5e1" class="input-group-text">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            width="1em"
            height="1em"
            fill="currentColor"
            class="bi bi-search"
            viewBox="0 0 16 16"
        >
            <path
                d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"
            />
        </svg>
        <span class="visually-hidden">Search</span>
    </label>
    <input type="search" class="form-control" id="529142a0-0ba9-4e54-aec6-e45902aca5e1" placeholder="Enter something" />
    <button type="button" class="btn btn-primary">Search</button>
</div>
```





## Layout

Blue Web offers a set of code to create a layout with a header, collapsible sidebar, and a main content area.

```html
<div class="blue-layout">
    <input id="my-layout-expand" type="checkbox" class="blue-layout-state blue-layout-state-expand" checked />
    <label
        class="blue-layout-toggle blue-layout-toggle-expand"
        for="my-layout-expand"
        title="Toggle sidebar"
        role="button"
    >
        <div class="btn blue-menu-item w-100 h-100 d-flex align-items-center justify-content-center p-0">🍔</div>
    </label>

    <input id="my-layout-drawer" type="checkbox" class="blue-layout-state blue-layout-state-drawer" />
    <label
        class="blue-layout-toggle blue-layout-toggle-drawer"
        for="my-layout-drawer"
        title="Toggle sidebar"
        role="button"
    >
        <div class="btn blue-menu-item w-100 h-100 d-flex align-items-center justify-content-center p-0">🍔</div>
    </label>

    <header class="blue-layout-header">Your header here</header>

    <aside
        class="blue-layout-side overflow-x-hidden overflow-y-auto h-100"
        style="color: var(--blue-sidebar-color); background: var(--blue-sidebar-bg);"
    >
        Your sidebar here
    </aside>
    <main class="blue-layout-main">Your main content here</main>

    <label
        aria-label="Close sidebar"
        for="my-layout-drawer"
        class="blue-layout-overlay bg-dark w-100 h-100"
        style="--bs-bg-opacity: 0.5;"
    >
    </label>
</div>
```

### Adjust header logo size using CSS variable

Implementations for [React](https://bruegmann.github.io/blue-react/v10/component/HeaderTitle) and [Blazor](https://bruegmann.github.io/blue-blazor/components/header-title/props) provide components to set a layout header with a logo and app title.
By default the logo size is `2rem`. You can override that value with CSS variable `--blue-header-title-image-size`:

```html
<div style="--blue-header-title-image-size: 1rem">
    <div class="blue-header-title d-inline-flex gap-2 fw-medium align-items-center px-3 py-2">
        <a href="."><img src="blue.svg" alt="My logo" class="blue-header-title-image" /></a>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href=".">My App</a></li>
            </ol>
        </nav>
    </div>
</div>
```

If your logo has another width than height, you can also use a combination of `--blue-header-title-image-width` and `--blue-header-title-image-height`.




## Menu Item

Styles for interactive elements in sidebar and in header area.

```html
<button type="button" class="blue-menu-item btn">
    <span class="blue-menu-item-icon" aria-hidden="true">☀️</span>
    <span class="blue-menu-item-label">Parent</span>
</button>
```

### Dropdown with Popover API and Anchor Positioning

In combination with the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) and [CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning)
you can create a dropdown menu without the need for custom JavaScript.

Blue Web provides some helper CSS classes for anchoring. With `.blue-anchor` you define the anchor, with `.blue-anchored` the target that will be attached to it.
With the CSS variable `--blue-anchor-name` you define the shared anchor name.

```html
<button
    type="button"
    class="blue-anchor blue-menu-item btn"
    popovertarget="popover-1"
    style="--blue-anchor-name: --anchor-1"
>
    <span class="blue-menu-item-label">Parent</span>
</button>
<div
    id="popover-1"
    popover
    class="blue-anchored blue-anchored-start blue-anchored-fallback blue-menu-item-dropdown text-body"
    style="--blue-anchor-name: --anchor-1; --blue-menu-item-dropdown-bg: var(--bs-body-bg);"
>
    <button type="button" class="blue-menu-item btn">
        <span class="blue-menu-item-icon" aria-hidden="true">🌍</span>
        <span class="blue-menu-item-label">Child</span>
    </button>
    <button type="button" class="blue-menu-item btn">
        <span class="blue-menu-item-icon" aria-hidden="true">🌑</span>
        <span class="blue-menu-item-label">Child 2</span>
    </button>
</div>
```

#### Polyfill

As of writing this, CSS Anchor Positioning doesn't work in all major browsers yet ([Can I Use](https://caniuse.com/css-anchor-positioning)). You might need a polyfill.
You can find one here: [https://github.com/oddbird/css-anchor-positioning](https://github.com/oddbird/css-anchor-positioning). You can quickly apply it like this:

```html
<button type="button" class="btn blue-btn-soft-secondary" onclick="applyPolyfill()">Apply polyfill</button>
<script type="module">
    function applyPolyfill() {
        if (!("anchorName" in document.documentElement.style)) {
            import("https://unpkg.com/@oddbird/css-anchor-positioning")
        }
    }
</script>
```

#### Fallback

Add `.blue-anchored-fallback` to the dropdown element and on not supported browsers, it will be displayed with an overlay over the whole page.

#### Position

This is how to place the menu right to the button:

```html
<button
    type="button"
    class="blue-anchor blue-menu-item btn"
    style="--blue-anchor-name: --anchor-2"
    popovertarget="popover-2"
>
    <span class="blue-menu-item-label">Parent</span>
</button>
<div
    id="popover-2"
    popover
    class="blue-anchored blue-anchored-end blue-menu-item-dropdown text-body"
    style="--blue-anchor-name: --anchor-2; --blue-menu-item-dropdown-bg: var(--bs-body-bg);"
>
    <button type="button" class="blue-menu-item btn">
        <span class="blue-menu-item-icon" aria-hidden="true">🌍</span>
        <span class="blue-menu-item-label">Child</span>
    </button>
</div>
```

#### Initially open

You can open the dropdown using JavaScript with `showPopover()`.

```html
<button type="button" class="blue-menu-item btn" popovertarget="popover-3" style="anchor-name: --anchor-3">
    <span class="blue-menu-item-label">Parent</span>
</button>
<div
    id="popover-3"
    popover
    class="blue-menu-item-dropdown text-body"
    style="left: anchor(--anchor-3 left); top: anchor(--anchor-3 bottom); --blue-menu-item-dropdown-bg: var(--bs-body-bg);"
>
    <button type="button" class="blue-menu-item btn">
        <span class="blue-menu-item-icon" aria-hidden="true">🌍</span>
        <span class="blue-menu-item-label">Child</span>
    </button>
</div>
<script>
    document.addEventListener("DOMContentLoaded", () => {
        document.getElementById("popover-3").showPopover()
    })
</script>
```

### Combine with Collapse

Together with `.blue-collapse` and [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details) you can create a collapsable sub menu.
Could be used inside the sidebar.

[Click here to go the example on the Collapse page](css/Collapse#combine-with-menu-item).





## Modal

Allows to use [Bootstrap Modals](https://getbootstrap.com/docs/5.3/components/modal/) but with the native dialog element and without the need of Bootstrap's JavaScript.

```html
<button type="button" class="btn blue-btn-soft-primary" onclick="my_modal.showModal()">Open modal</button>

<dialog class="blue-modal modal" id="my_modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5">Modal title</h1>
                <form method="dialog" style="display: contents;">
                    <button type="submit" class="btn-close" aria-label="Close"></button>
                </form>
            </div>
            <div class="modal-body">Hello World</div>
        </div>
    </div>
    <form method="dialog" class="blue-modal-backdrop"><button>Close</button></form>
</dialog>
```

### Offcanvas

Because [Bootstrap Offcanvas](https://getbootstrap.com/docs/5.3/components/offcanvas/) works quite similar, you can also use `.blue-modal` with that.

```html
<button type="button" class="btn blue-btn-soft-primary" onclick="my_offcanvas.showModal()">Open offcanvas</button>

<dialog class="blue-modal modal" id="my_offcanvas">
    <div class="offcanvas offcanvas-start show">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
            <form method="dialog" style="display: contents;">
                <button type="submit" class="btn-close" aria-label="Close"></button>
            </form>
        </div>
        <div class="offcanvas-body">
            <div>
                Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images,
                lists, etc.
            </div>
        </div>
    </div>
    <form method="dialog" class="blue-modal-backdrop"><button>Close</button></form>
</dialog>
```

### Modal in Offcanvas

```html
<section>
    <button type="button" class="btn blue-btn-soft-primary" onclick="my_offcanvas2.showModal()">Open offcanvas</button>

    <dialog class="blue-modal modal" id="my_offcanvas2">
        <div class="offcanvas offcanvas-start show">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
                <form method="dialog" style="display: contents;">
                    <button type="submit" class="btn-close" aria-label="Close"></button>
                </form>
            </div>
            <div class="offcanvas-body">
                <div>
                    Some text as placeholder. In real life you can have the elements you have chosen. Like, text,
                    images, lists, etc.
                </div>

                <button type="button" class="btn blue-btn-soft-primary" onclick="my_modal2.showModal()">
                    Open modal
                </button>

                <dialog class="blue-modal modal" id="my_modal2">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5">Modal title</h1>
                                <form method="dialog" style="display: contents;">
                                    <button type="submit" class="btn-close" aria-label="Close"></button>
                                </form>
                            </div>
                            <div class="modal-body">Hello World</div>
                        </div>
                    </div>
                    <form method="dialog" class="blue-modal-backdrop"><button>Close</button></form>
                </dialog>
            </div>
        </div>
        <form method="dialog" class="blue-modal-backdrop"><button>Close</button></form>
    </dialog>
</section>
```




## Neumorphism SCSS utilities (Experimental)

Blue Web comes with `dist/neu.scss` containing some SCSS and CSS utilities to make it easy to apply shadow effects.
The effects can have some weird side-effects, that's why they are not included by default with `dist/style.scss`. You have to embed it yourself.

### Getting started

1. Import neu.css in your main SCSS file:

    ```scss
    @import "~blue-react/dist/neu";
    ```

2. Apply the mixin "neu()" at the area you want to use it:
    ```scss
    :root {
        @include neu(#610dfd);
    }
    ```
    First parameter takes the areas's background color. As second parameter you can set the background color for inset.

### Utility classes

The notation looks like this: `.neu-shadow{-inset?}{-switch?}{-size}`

- Where `inset` is optional. When you set it, the box-shadow will be set to the inside.
- Where `switch` is optional. When you set it, the light and dark shadow colors will be switched. **Can only be used together with `inset`!**
- Where size is required and one of:
    - `1` - distance and blur values multiplied with `.25`
    - `2` - distance and blur values multiplied with `.5`
    - `3` - distance and blur values multiplied with `1`
    - `4` - distance and blur values multiplied with `1.5`
    - `5` - distance and blur values multiplied with `3`

Format and the values are inspired by [Bootstrap](https://getbootstrap.com/docs/5.3/utilities/spacing/#notation).

### Combining classes

You can combine shadows with inset shadows like this:

```html
<section class="bg-body">
    <div
        class="neu-shadow-5 neu-shadow-inset-switch-3"
        style="width: 400px; height: 200px; border-radius: 1rem; margin: 2rem;"
    ></div>
</section>
```

```scss
.bg-body {
    @include neu($body-bg, $body-bg);
}

@include color-mode(dark) {
    .bg-body {
        @include neu($body-bg-dark, $body-bg-dark);
    }
}
```

### CSS variables

You can use Neu's CSS variables and combine them like this:\
`style="var(--neu-shadow-3), var(--neu-shadow-inset-switch-1)"`

The notation is similar to the Utility classes.

### Examples

You can combine shadows to different soft effects.

```html
<section class="bg-body">
    <div class="my-5 rounded-5 p-4 mx-4" style="box-shadow: var(--neu-shadow-5), var(--neu-shadow-inset-switch-1);">
        Neumorph card<br />
        <button
            class="btn btn-lg btn-primary mt-3 rounded-4"
            style="var(--neu-shadow-4), var(--neu-shadow-inset-switch-3)"
        >
            Click me
        </button>
    </div>
</section>
```





## Scrollbar

### `.blue-scroll-shadow`

Adds shadow if area is scrollable.

```html
<div class="blue-normal-scrollbar mb-3 p-3 rounded border border-primary-subtle">
    <label> Area with <code>.blue-normal-scrollbar</code> and also <code>.blue-scroll-shadow</code> </label>
    <select class="form-control blue-scroll-shadow" multiple aria-readonly>
        <option>one</option>
        <option>two</option>
        <option>three</option>
        <option>four</option>
        <option>five</option>
        <option>six</option>
    </select>
</div>
```

## Sidebar

### `.blue-sidebar-exception`

Prevents the default behaviour of closing sidebar after clicking an item.

### `.blue-sidebar-bottom`

With Sidebar Bottom, for example, a registered user can be displayed at the bottom left. Usable within `<SidebarMenu bottomContent={} />`.

### `.blue-sidebar-hidden-on-open`

The element is hidden as long as the sidebar is open.

### `.blue-sidebar-pseudo-hidden-on-open`, `.blue-sidebar-before-hidden-on-open`, `.blue-sidebar-afters-hidden-on-open`

Pseudo elements of element are hidden as long as the sidebar is open. `.blue-sidebar-before-hidden-on-open` hides
`::before`,`.blue-sidebar-after-hidden-on-open` hides `::after` and `.blue-sidebar-pseudo-hidden-on-open will` hide both.

### `.blue-sidebar-d-flex-on-open`

Alias: `.blue-sidebar-visible-on-open`
The element is visible (`display: flex`) as long as the sidebar is open.

### `.blue-sidebar-d-block-on-open`

The element is visible (`display: block`) as long as the sidebar is open.

### `.w-bla-sidebar-width`

Gives element the width of the sidebar, defined with `$bla-sidebar-width`.

### `.blue-sidebar-state`(`.open`)

Use this to control the state of the sidebar and sidebar menu items inside.

### `.blue-sidebar-menu-horizontal-on-open`

Use this inside of the sidebar to make menus act like horizontal menus when the sidebar is open. Designed for the `IconMenuItem` component. But might be useful for other scenarios aswell.

### `.blue-sidebar-menu-vertical-on-open`

If you want to change direction inside of `.blue-sidebar-menu-horizontal-on-open` back to vertical, use `.blue-sidebar-menu-vertical-on-open`. Might be useful for dropdowns.




## Tabs

Tabs just with HTML and CSS, no JavaScript needed. The state is managed by the radio input elements.
The classes by Blue Web only provide styles for fundamental functionality.

```html
<div role="tablist" class="blue-tabs">
    <input
        role="tab"
        id="my_tabs_0_tab_1"
        aria-label="Tab 1"
        aria-controls="my_tabs_0_tabpanel_1"
        class="blue-tab"
        type="radio"
        checked=""
        name="my_tabs_0"
    />
    <div
        role="tabpanel"
        id="my_tabs_0_tabpanel_1"
        aria-labelledby="my_tabs_0_tab_1"
        tabindex="0"
        class="blue-tab-content"
    >
        Tab content 1
    </div>

    <input
        role="tab"
        id="my_tabs_0_tab_2"
        aria-label="Tab 2"
        aria-controls="my_tabs_0_tabpanel_2"
        class="blue-tab"
        type="radio"
        name="my_tabs_0"
    />
    <div
        role="tabpanel"
        id="my_tabs_0_tabpanel_2"
        aria-labelledby="my_tabs_0_tab_2"
        tabindex="0"
        class="blue-tab-content"
    >
        Tab content 2
    </div>

    <input
        role="tab"
        id="my_tabs_0_tab_3"
        aria-label="Tab 3"
        aria-controls="my_tabs_0_tabpanel_3"
        class="blue-tab"
        type="radio"
        name="my_tabs_0"
    />
    <div
        role="tabpanel"
        id="my_tabs_0_tabpanel_3"
        aria-labelledby="my_tabs_0_tab_3"
        tabindex="0"
        class="blue-tab-content"
    >
        Tab content 3
    </div>
</div>
```

### Bootstrap Tabs Nav style

You should combine them with `.nav.nav-tabs` and `.nav-link` by Bootstrap.

```html
<div role="tablist" class="blue-tabs nav nav-tabs">
    <input
        role="tab"
        id="my_tabs_1_tab_1"
        aria-label="Tab 1"
        aria-controls="my_tabs_1_tabpanel_1"
        class="blue-tab nav-link"
        type="radio"
        checked=""
        name="my_tabs_1"
    />
    <div
        role="tabpanel"
        id="my_tabs_1_tabpanel_1"
        aria-labelledby="my_tabs_1_tab_1"
        tabindex="0"
        class="blue-tab-content p-3"
    >
        Tab content 1
    </div>

    <input
        role="tab"
        id="my_tabs_1_tab_2"
        aria-label="Tab 2"
        aria-controls="my_tabs_1_tabpanel_2"
        class="blue-tab nav-link"
        type="radio"
        name="my_tabs_1"
    />
    <div
        role="tabpanel"
        id="my_tabs_1_tabpanel_2"
        aria-labelledby="my_tabs_1_tab_2"
        tabindex="0"
        class="blue-tab-content p-3"
    >
        Tab content 2
    </div>

    <input
        role="tab"
        id="my_tabs_1_tab_3"
        aria-label="Tab 3"
        aria-controls="my_tabs_1_tabpanel_3"
        class="blue-tab nav-link"
        type="radio"
        name="my_tabs_1"
    />
    <div
        role="tabpanel"
        id="my_tabs_1_tabpanel_3"
        aria-labelledby="my_tabs_1_tab_3"
        tabindex="0"
        class="blue-tab-content p-3"
    >
        Tab content 3
    </div>
</div>
```

### Bootstrap Underline Nav style

```html
<div role="tablist" class="blue-tabs nav nav-underline">
    <input
        role="tab"
        id="my_tabs_2_tab_1"
        aria-label="Tab 1"
        aria-controls="my_tabs_2_tabpanel_1"
        class="blue-tab nav-link"
        type="radio"
        checked=""
        name="my_tabs_2"
    />
    <div
        role="tabpanel"
        id="my_tabs_2_tabpanel_1"
        aria-labelledby="my_tabs_2_tab_1"
        tabindex="0"
        class="blue-tab-content p-3"
    >
        Tab content 1
    </div>

    <input
        role="tab"
        id="my_tabs_2_tab_2"
        aria-label="Tab 2"
        aria-controls="my_tabs_2_tabpanel_2"
        class="blue-tab nav-link"
        type="radio"
        name="my_tabs_2"
    />
    <div
        role="tabpanel"
        id="my_tabs_2_tabpanel_2"
        aria-labelledby="my_tabs_2_tab_2"
        tabindex="0"
        class="blue-tab-content p-3"
    >
        Tab content 2
    </div>

    <input
        role="tab"
        id="my_tabs_2_tab_3"
        aria-label="Tab 3"
        aria-controls="my_tabs_2_tabpanel_3"
        class="blue-tab nav-link"
        type="radio"
        name="my_tabs_2"
    />
    <div
        role="tabpanel"
        id="my_tabs_2_tabpanel_3"
        aria-labelledby="my_tabs_2_tab_3"
        tabindex="0"
        class="blue-tab-content p-3"
    >
        Tab content 3
    </div>
</div>
```

### Bootstrap Underline Nav style customized

You can customize the look more by overriding the CSS variables coming from Bootstrap. Blue Web also added some additional CSS variables.

```html
<div
    role="tablist"
    class="blue-tabs nav nav-underline"
    style="--bs-nav-link-color: var(--bs-emphasis-color);
        --blue-tabs-underline-active-font-weight: 600;
        --blue-tabs-underline-active-border-bottom-color: tomato;"
>
    <input
        role="tab"
        id="my_tabs_3_tab_1"
        aria-label="Tab 1"
        aria-controls="my_tabs_3_tabpanel_1"
        class="blue-tab nav-link flex-grow-1 text-center"
        type="radio"
        checked=""
        name="my_tabs_3"
    />
    <div
        role="tabpanel"
        id="my_tabs_3_tabpanel_1"
        aria-labelledby="my_tabs_3_tab_1"
        tabindex="0"
        class="blue-tab-content p-3"
    >
        Tab content 1
    </div>

    <input
        role="tab"
        id="my_tabs_3_tab_2"
        aria-label="Tab 2"
        aria-controls="my_tabs_3_tabpanel_2"
        class="blue-tab nav-link flex-grow-1 text-center"
        type="radio"
        name="my_tabs_3"
    />
    <div
        role="tabpanel"
        id="my_tabs_3_tabpanel_2"
        aria-labelledby="my_tabs_3_tab_2"
        tabindex="0"
        class="blue-tab-content p-3"
    >
        Tab content 2
    </div>

    <input
        role="tab"
        id="my_tabs_3_tab_3"
        aria-label="Tab 3"
        aria-controls="my_tabs_3_tabpanel_3"
        class="blue-tab nav-link flex-grow-1 text-center"
        type="radio"
        name="my_tabs_3"
    />
    <div
        role="tabpanel"
        id="my_tabs_3_tabpanel_3"
        aria-labelledby="my_tabs_3_tab_3"
        tabindex="0"
        class="blue-tab-content p-3"
    >
        Tab content 3
    </div>
</div>
```





## Text and Icons

### `.blue-page-header` or `.page-header`

In previous versions of Bootstrap, `.page-header` was a class that could be used to add a border to the bottom of a page header.
Unfortunately his class was removed in Bootstrap 5, so it's now part of Blue Web CSS.

```html
<div class="border rounded p-3">
    <div class="h1 blue-page-header">Example headline</div>
</div>
```

### `.blue-icon` or `.bi`

Vertically alignment, especially for Bootstrap Icons.



## Tooltip

### `.blue-tooltip`

CSS only solution for tooltips. For accessibility reasons, only wrap around interactive elements like buttons or links.
To use, add the `data-tooltip` attribute to the wrapping element.

```html
<div data-tooltip="Put your tooltip text here. It can also become pretty long if you want to." class="blue-tooltip">
    <button class="btn btn-link">Hover me!</button>
</div>
```

### `.blue-tooltip-up`, `.blue-tooltip-down`, `.blue-tooltip-start`, `.blue-tooltip-end`

Change the position of the tooltip. To be used together with `data-tooltip`.

```html
<div data-tooltip="Up" class="blue-tooltip-up"><button class="btn btn-link">Up!</button></div>
<div data-tooltip="Down" class="blue-tooltip-down"><button class="btn btn-link">Down!</button></div>
<div data-tooltip="Start" class="blue-tooltip-start"><button class="btn btn-link">Start!</button></div>
<div data-tooltip="End" class="blue-tooltip-end"><button class="btn btn-link">End!</button></div>
```

### `.blue-tooltip-content`

This is how you can customize the tooltip content with HTML.

```html
<div class="blue-tooltip">
    <div class="blue-tooltip-content" role="tooltip">
        <strong>Some</strong> <i>custom</i> <u>content</u> <s>here</s>.
    </div>
    <button class="btn btn-link">Hover me!</button>
</div>
```



## Visibility

### `.blue-opacity-hover`, `.blue-opacity-hover-content-active`, `.blue-opacity-hover-content-default`

With `.blue-opacity-hover` you can hide things by default and let them appear when the user hovers the area around it or focuses an element inside.
This way you can simplify the UI a bit and make controls disappear when they are not needed. On touch screens the elements will always be visible.
Usage:

```html
<div class="card blue-opacity-hover p-3 flex-row justify-content-between">
    <h5 class="blue-opacity-hover-content-default">Hover here to see a button</h5>
    <input type="text" class="form-control me-1" placeholder="When you focus me, the button should appear too" />
    <button class="btn btn-secondary blue-opacity-hover-content-active">Hey there</button>
</div>
```

### `.blue-d-hover`, `.blue-d-hover-content-active`, `.blue-d-hover-content-default`

`.blue-d-hover` is similar to `.blue-opacity-hover`, but the elements will disappear and appear with the `display` property.
It is ideal if you want to replace something with something else when the user hovers. On the example I used it to change the edit and delete icons from lineout to filled when hovering.
Usage:

```html
<button class="btn btn-secondary blue-d-hover d-inline-flex align-items-center gap-1">
    <span class="blue-d-hover-content-default">⭕</span>
    <span class="blue-d-hover-content-active">🔵</span>
    Hover to fill the icon
</button>
```




## Actions

Combination of toolbar and a dropdown menu. Items in toolbar will only be shown if there is enough space.
Otherwise they will be visible in the dropdown menu. JavaScript detects if space is changing and rearranges.

### Demo 1: Use Menu Items of Blue Web and Dropdown with Popover and Anchor Positioning

```html
<div
    class="BLUE-actions border p-1"
    style="width: 460px"
    role="toolbar"
    aria-label="Toolbar with button groups"
    id="actionDemoPopover"
>
    <div class="BLUE-actions-menu">
        <button type="button" class="blue-menu-item btn">
            <span class="blue-menu-item-icon" aria-hidden="true">🌍</span>
            <span class="blue-menu-item-label">Child</span>
        </button>
        <button type="button" class="blue-menu-item btn">
            <span class="blue-menu-item-icon" aria-hidden="true">🌑</span>
            <span class="blue-menu-item-label">Child 2</span>
        </button>
        <button type="button" class="blue-menu-item btn">
            <span class="blue-menu-item-icon" aria-hidden="true">☀️</span>
            <span class="blue-menu-item-label">Child 3</span>
        </button>
        <button type="button" class="blue-menu-item btn">
            <span class="blue-menu-item-icon" aria-hidden="true">🚀</span>
            <span class="blue-menu-item-label">Child 4</span>
        </button>
        <button type="button" class="blue-menu-item btn">
            <span class="blue-menu-item-icon" aria-hidden="true">🌌</span>
            <span class="blue-menu-item-label">Child 5</span>
        </button>
    </div>

    <div class="BLUE-actions-collapse" style="--blue-anchor-name: --actionDemoPopoverAnchor">
        <button type="button" popovertarget="actionDemoPopoverPopover" class="blue-anchor blue-menu-item btn px-3">
            <span class="blue-menu-item-icon" aria-hidden="true">&#8942;</span>
            <span class="visually-hidden">Toggle menu</span>
        </button>

        <div
            id="actionDemoPopoverPopover"
            popover
            class="BLUE-actions-collapse-menu blue-anchored blue-anchored-end blue-anchored-fallback blue-menu-item-dropdown text-body"
            style="--blue-menu-item-dropdown-bg: var(--bs-body-bg)"
        >
            <button type="button" class="blue-menu-item btn">
                <span class="blue-menu-item-icon" aria-hidden="true">🌍</span>
                <span class="blue-menu-item-label">Child</span>
            </button>
            <button type="button" class="blue-menu-item btn">
                <span class="blue-menu-item-icon" aria-hidden="true">🌑</span>
                <span class="blue-menu-item-label">Child 2</span>
            </button>
            <button type="button" class="blue-menu-item btn">
                <span class="blue-menu-item-icon" aria-hidden="true">☀️</span>
                <span class="blue-menu-item-label">Child 3</span>
            </button>
            <button type="button" class="blue-menu-item btn">
                <span class="blue-menu-item-icon" aria-hidden="true">🚀</span>
                <span class="blue-menu-item-label">Child 4</span>
            </button>
            <button type="button" class="blue-menu-item btn">
                <span class="blue-menu-item-icon" aria-hidden="true">🌌</span>
                <span class="blue-menu-item-label">Child 5</span>
            </button>
        </div>
    </div>
</div>

<label
    >Change container width
    <input id="actionDemoPopoverRange" type="range" min="50" max="1200" value="460" />
</label>

<script>
    window.actionDemoPopoverResponse = null
    document.addEventListener("DOMContentLoaded", () => {
        actionDemoPopoverResponse = blueWeb.actions.init(document.getElementById("actionDemoPopover"))

        actionDemoPopoverRange.addEventListener("input", ({ target }) => {
            actionDemoPopover.style.width = `${target.value}px`
        })
    })
</script>
```

### Demo 2: Use Menu Items of Blue Web and Details

[HTML Details](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details) will be used for the dropdown menu.
Event handler in `actions.ts` automatically closes the Menu when clicking outside.

```html
<div
    class="BLUE-actions border p-1"
    style="width: 460px"
    role="toolbar"
    aria-label="Toolbar with button groups"
    id="actionDemoDetails"
>
    <div class="BLUE-actions-menu">
        <button type="button" class="blue-menu-item btn">
            <span class="blue-menu-item-icon" aria-hidden="true">🌍</span>
            <span class="blue-menu-item-label">Child</span>
        </button>
        <button type="button" class="blue-menu-item btn">
            <span class="blue-menu-item-icon" aria-hidden="true">🌑</span>
            <span class="blue-menu-item-label">Child 2</span>
        </button>
        <button type="button" class="blue-menu-item btn">
            <span class="blue-menu-item-icon" aria-hidden="true">☀️</span>
            <span class="blue-menu-item-label">Child 3</span>
        </button>
        <button type="button" class="blue-menu-item btn">
            <span class="blue-menu-item-icon" aria-hidden="true">🚀</span>
            <span class="blue-menu-item-label">Child 4</span>
        </button>
        <button type="button" class="blue-menu-item btn">
            <span class="blue-menu-item-icon" aria-hidden="true">🌌</span>
            <span class="blue-menu-item-label">Child 5</span>
        </button>
    </div>

    <details class="BLUE-actions-collapse blue-collapse">
        <summary class="blue-collapse-header blue-menu-item btn px-3">
            <span class="blue-menu-item-icon" aria-hidden="true">&#8942;</span>
            <span class="visually-hidden">Toggle menu</span>
        </summary>

        <div
            class="BLUE-actions-collapse-menu blue-menu-item-dropdown text-body end-0"
            style="--blue-menu-item-dropdown-bg: var(--bs-body-bg)"
        >
            <button type="button" class="blue-menu-item btn">
                <span class="blue-menu-item-icon" aria-hidden="true">🌍</span>
                <span class="blue-menu-item-label">Child</span>
            </button>
            <button type="button" class="blue-menu-item btn">
                <span class="blue-menu-item-icon" aria-hidden="true">🌑</span>
                <span class="blue-menu-item-label">Child 2</span>
            </button>
            <button type="button" class="blue-menu-item btn">
                <span class="blue-menu-item-icon" aria-hidden="true">☀️</span>
                <span class="blue-menu-item-label">Child 3</span>
            </button>
            <button type="button" class="blue-menu-item btn">
                <span class="blue-menu-item-icon" aria-hidden="true">🚀</span>
                <span class="blue-menu-item-label">Child 4</span>
            </button>
            <button type="button" class="blue-menu-item btn">
                <span class="blue-menu-item-icon" aria-hidden="true">🌌</span>
                <span class="blue-menu-item-label">Child 5</span>
            </button>
        </div>
    </details>
</div>

<label
    >Change container width
    <input id="actionDemoDetailsRange" type="range" min="50" max="1200" value="460" />
</label>

<script>
    window.actionDemoDetailsResponse = null
    document.addEventListener("DOMContentLoaded", () => {
        actionDemoDetailsResponse = blueWeb.actions.init(document.getElementById("actionDemoDetails"))

        actionDemoDetailsRange.addEventListener("input", ({ target }) => {
            actionDemoDetails.style.width = `${target.value}px`
        })
    })
</script>
```

The JavaScript function `init` returns an object with the function `destroy()`. When you execute it, the `ResizeObserver` will be disconnected
and global event listeners will be removed. Try to click the button. It will destroy the actions from above.

```html
<button id="destroyActionsDemoMenuItems" type="button" class="btn blue-btn-soft-danger">Destroy</button>
<script>
    destroyActionsDemoMenuItems.addEventListener("click", () => {
        window.actionsDemoMenuItemsResponse.destroy()
    })
</script>
```

### Demo 2: Use Bootstrap Button Groups

```html
<div
    class="BLUE-actions border p-1"
    style="width: 460px"
    role="toolbar"
    aria-label="Toolbar with button groups"
    id="actionsDemoButtonGroups"
>
    <div class="BLUE-actions-menu gap-2">
        <div class="btn-group" role="group" aria-label="First group">
            <button type="button" class="btn btn-primary">1</button>
            <button type="button" class="btn btn-primary">2</button>
            <button type="button" class="btn btn-primary">3</button>
            <button type="button" class="btn btn-primary">4</button>
        </div>
        <div class="btn-group" role="group" aria-label="Second group">
            <button type="button" class="btn btn-secondary">5</button>
            <button type="button" class="btn btn-secondary">6</button>
            <button type="button" class="btn btn-secondary">7</button>
        </div>
        <div class="btn-group" role="group" aria-label="Third group">
            <button type="button" class="btn btn-info">8</button>
        </div>
        <div class="btn-group" role="group" aria-label="Fourth group">
            <button type="button" class="btn btn-primary">9</button>
            <button type="button" class="btn btn-primary">10</button>
            <button type="button" class="btn btn-primary">11</button>
            <button type="button" class="btn btn-primary">12</button>
        </div>
    </div>

    <details class="BLUE-actions-collapse blue-collapse">
        <summary class="blue-collapse-header blue-menu-item btn px-3">
            <span class="blue-menu-item-icon" aria-hidden="true">&#8942;</span>
            <span class="visually-hidden">Toggle menu</span>
        </summary>

        <div class="BLUE-actions-collapse-menu d-flex flex-column end-0">
            <div class="btn-group" role="group" aria-label="First group">
                <button type="button" class="btn btn-primary">1</button>
                <button type="button" class="btn btn-primary">2</button>
                <button type="button" class="btn btn-primary">3</button>
                <button type="button" class="btn btn-primary">4</button>
            </div>
            <div class="btn-group" role="group" aria-label="Second group">
                <button type="button" class="btn btn-secondary">5</button>
                <button type="button" class="btn btn-secondary">6</button>
                <button type="button" class="btn btn-secondary">7</button>
            </div>
            <div class="btn-group" role="group" aria-label="Third group">
                <button type="button" class="btn btn-info">8</button>
            </div>
            <div class="btn-group" role="group" aria-label="Fourth group">
                <button type="button" class="btn btn-primary">9</button>
                <button type="button" class="btn btn-primary">10</button>
                <button type="button" class="btn btn-primary">11</button>
                <button type="button" class="btn btn-primary">12</button>
            </div>
        </div>
    </details>
</div>

<label
    >Change container width
    <input id="actionsDemoButtonGroupsRange" type="range" min="50" max="1200" value="460" />
</label>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        blueWeb.actions.init(actionsDemoButtonGroups)

        actionsDemoButtonGroupsRange.addEventListener("input", ({ target }) => {
            actionsDemoButtonGroups.style.width = `${target.value}px`
        })
    })
</script>
```






## Color Mode

Use `color-mode.js` for better support for [Bootstrap's color modes](https://getbootstrap.com/docs/5.3/customize/color-modes/).

The script automatically detects if the user uses light or dark mode and sets the `data-bs-theme` attribute to the document element (`<html>`). It also updates it if the color mode changes.
It also exports these functions:

- `getStored()` - Returns what is stored (`"light"`, `"dark"` or `null`).
- `getPreferred()` - Returns current color mode (`"light"` or `"dark"`).
- `set(colorMode: string)` - Let's you set the color mode.
- `init()` - Let's you reinitialize manually. Will automatically executed when the script loaded and when the color mode changes.

### Color Mode Switch

Example about, how you could create a color mode switch.

```html
<div class="form-floating">
    <select class="form-select w-auto" id="colorModeSelect" aria-label="Selector for color mode">
        <option value="auto">Auto</option>
        <option value="light">Light</option>
        <option value="dark">Dark</option>
    </select>
    <label for="colorModeSelect">Select</label>
</div>

<script>
    const initColorModeSelect = () =>
        (colorModeSelect.value = blueWeb.colorMode.getStored() ? blueWeb.colorMode.getPreferred() : "auto")

    document.addEventListener("DOMContentLoaded", initColorModeSelect)
    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", initColorModeSelect)

    colorModeSelect.addEventListener("change", ({ target }) => {
        blueWeb.colorMode.set(target.value)
    })
</script>
```





## Dialog

These functions are meant as a nicer alternative to the native `alert`, `confirm` and `prompt` functions.
They are not meant to be used as a replacement for more complex modals.

### Functions

#### Verify

```html
<button id="verify_button" type="button" class="btn blue-btn-soft-secondary">Verify</button>

<script>
    verify_button.addEventListener("click", async () => {
        const yesOrNo = await blueWeb.dialog.verify("Do you want to continue?")
        await blueWeb.dialog.tell(yesOrNo ? "You clicked yes" : "You clicked no")
    })
</script>
```

#### Tell

```html
<button id="tell_button" type="button" class="btn blue-btn-soft-secondary">Tell</button>

<script>
    tell_button.addEventListener("click", async () => {
        await blueWeb.dialog.tell("A message for you")
    })
</script>
```

#### Ask

```html
<button id="ask_button" type="button" class="btn blue-btn-soft-secondary">Ask</button>

<script>
    ask_button.addEventListener("click", async () => {
        const answer = await blueWeb.dialog.ask("What is the question?", {
            title: "Question"
        })
        await blueWeb.dialog.tell("You asked: " + answer)
    })
</script>
```



## Progress

A "fake" progress bar that will appear fixed at the top of the page.

### Start and stop

```html
<button id="startButton" type="button" class="btn blue-btn-soft-secondary">Start</button>

<script>
    startButton.addEventListener("click", async () => {
        blueWeb.progress.start()
    })
</script>
```

```html
<button id="stopButton" type="button" class="btn blue-btn-soft-secondary">Stop</button>

<script>
    stopButton.addEventListener("click", async () => {
        blueWeb.progress.stop()
    })
</script>
```

### Add to custom element

You can customize the element further by setting a custom ID, parent element and position class name. This allows you to attach the progress element to some other element than the body.

```html
<div id="myElement" class="bg-secondary-subtle border border-primary rounded-2 p-3 position-relative mb-1">
    Add progress bar to this
</div>
<button id="startButton2" type="button" class="btn blue-btn-soft-secondary">Start</button>
<button id="stopButton2" type="button" class="btn blue-btn-soft-secondary">Stop</button>

<script>
    startButton2.addEventListener("click", async () => {
        blueWeb.progress.start(
            "myElementProgress",
            document.getElementById("myElement"),
            "Loading data for my element",
            "position-absolute top-0 start-0 end-0"
        )
    })

    stopButton2.addEventListener("click", async () => {
        blueWeb.progress.stop("myElementProgress")
    })
</script>
```



## ReadView

A Web Component that displays a read view of its content and allows the user to switch to an edit view.

### Demo

#### Basic usage

```html
<read-view id="readViewDemo_readView">
    <a href="https://bruegmann.github.io/blue-web/" id="readViewDemo_link" target="_blank" rel="noopener noreferrer"
        >Link</a
    >
    Click to edit the link
</read-view>
<form id="readViewDemo_form" class="d-none">
    <input type="text" placeholder="Edit me" value="https://bruegmann.github.io/blue-web/" class="form-control" />
    <button type="submit" class="btn blue-btn-soft-secondary">Submit</button>
</form>

<script>
    readViewDemo_readView.addEventListener("EditRequested", () => {
        readViewDemo_readView.classList.add("d-none")
        readViewDemo_form.classList.remove("d-none")
    })

    readViewDemo_form.addEventListener("submit", (e) => {
        e.preventDefault()
        const input = readViewDemo_form.querySelector("input")
        readViewDemo_link.href = input.value
        readViewDemo_readView.classList.remove("d-none")
        readViewDemo_form.classList.add("d-none")
    })
</script>
```

#### Disabled

```html
<read-view disabled>
    <a href="https://bruegmann.github.io/blue-web/" id="readViewDemo_link" target="_blank" rel="noopener noreferrer"
        >Link</a
    >
    This one is disabled
</read-view>
```



## SideLayout

<div class="alert alert-warning" role="alert">
    Using the Web Component as a global layout in production might not be ideal because of FOUC (Flash of Unstyled
    Content). You should check out [the CSS Layout solution instead](css/Layout).
</div>

### Simple example

Layout with a sidebar as a Web Component.

```html
<side-layout>
    <div slot="header">Header</div>
    <div slot="side">Side</div>
    Main
</side-layout>
```

### Example with Blue Web (Bootstap) classes

```html
<div class="bg-primary-subtle" style="height: 100dvh;">
    <side-layout>
        <div slot="expand-toggler" class="w-100 h-100 p-1">
            <div class="btn blue-btn-plain-theme w-100 h-100" style="box-shadow: var(--trigger-box-shadow);">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 16 16"
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    class="bi bi-layout-sidebar"
                >
                    <path
                        d="M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5-1v12h9a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zM4 2H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h2z"
                    ></path>
                </svg>
            </div>
        </div>
        <div slot="drawer-toggler" class="w-100 h-100 p-1">
            <div class="btn blue-btn-plain-theme w-100 h-100" style="box-shadow: var(--trigger-box-shadow);">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 16 16"
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    class="bi bi-layout-sidebar-inset"
                >
                    <path
                        d="M14 2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zM2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2z"
                    ></path>
                    <path d="M3 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"></path>
                </svg>
            </div>
        </div>
        <div slot="overlay" class="bg-dark w-100 h-100" style="--bs-bg-opacity: 0.5;"></div>
        <div slot="side" class="bg-primary-subtle h-100">Side</div>
        <div class="w-100 h-100 p-1">
            <div class="w-100 h-100 overflow-auto rounded border p-4 bg-body">
                <div class="h1 page-header">Hello World</div>
            </div>
        </div>
    </side-layout>
</div>
```

### Example with Tailwind CSS classes

```html
<div class="text-secondary-500 dark:bg-secondary-900 dark:text-secondary-400 bg-white h-screen">
    <side-layout>
        <div slot="expand-toggler" class="size-full p-1">
            <div class="btn flex size-full items-center justify-center">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 16 16"
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    class="bi bi-layout-sidebar"
                >
                    <path
                        d="M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5-1v12h9a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zM4 2H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h2z"
                    ></path>
                </svg>
            </div>
        </div>
        <div slot="drawer-toggler" class="size-full p-1">
            <div class="btn flex size-full items-center justify-center">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 16 16"
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    class="bi bi-layout-sidebar-inset"
                >
                    <path
                        d="M14 2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zM2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2z"
                    ></path>
                    <path d="M3 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"></path>
                </svg>
            </div>
        </div>
        <div class="bg-secondary-950/80 size-full" slot="overlay"></div>
        <div
            slot="side"
            class="max-lg:text-secondary-500 max-lg:dark:bg-secondary-800 max-lg:dark:text-secondary-400 h-full max-lg:bg-white"
        >
            Side
        </div>
        <div class="size-full p-1">
            <div class="border-secondary-200 dark:border-secondary-800 size-full overflow-auto rounded-md border p-4">
                <div
                    role="heading"
                    aria-level="1"
                    class="text-secondary-800 dark:text-secondary-100 mt-4 mb-3 font-bold tracking-tight text-3xl border-secondary-200 dark:border-secondary-800 border-b-4 pb-1"
                >
                    Hello World
                </div>
            </div>
        </div>
    </side-layout>
</div>
```


import UtilsDemo from "$/components/UtilsDemo.tsx"

## Utils

### Usage

You can import functions inidivually like this:

```js
import { startLoading } from "blue-web/dist/js/utils.js"
```

or like this:

```html
<script src="https://unpkg.com/blue-web@latest/dist/js/utils.bundle.js"></script>
```

`utils.js` is provided as ESM, so you can use it as a module in the browser:

```html
<button type="button" id="btn" class="btn blue-btn-soft-primary">Start loader</button>

<script type="module">
    import { startLoading } from "./node_modules/blue-web/dist/js/utils.js"

    document.getElementById("btn").addEventListener("click", () => {
        startLoading()
    })
</script>
```

### Required markup

Some of the util functions to show status information require to have some HTML elements available.

```html
<div class="blue-status-circle blue-loading blue-status-loading"><div class="spinner-bounce-circle"><div></div><div></div></div></div>
<div class="blue-status-circle blue-status-success"><svg class="bi bi-check-circle-fill" fill=currentColor height=1em viewBox="0 0 16 16" width=1em xmlns=http://www.w3.org/2000/svg><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path></svg></div>
<div class="blue-status-circle blue-status-info"><svg class="bi bi-info-circle-fill" fill=currentColor height=1em viewBox="0 0 16 16" width=1em xmlns=http://www.w3.org/2000/svg><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"></path></svg></div>
<div class="blue-status-circle blue-status-warning"><svg class="bi bi-exclamation-circle-fill" fill=currentColor height=1em viewBox="0 0 16 16" width=1em xmlns=http://www.w3.org/2000/svg><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2"></path></svg></div>
<div class="blue-status-circle blue-status-danger"><svg class="bi bi-x-circle-fill" fill=currentColor height=1em viewBox="0 0 16 16" width=1em xmlns=http://www.w3.org/2000/svg><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z"></path></svg></div>
<div class="alert blue-status-alert"><button aria-label=Close class="btn-close float-end mb-1" type=button></button><div class=alert-body></div></div>
```

### JavaScript Functions

<UtilsDemo client:only />



## View Transition API

[View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API) is not a Blue Web API, but a native Web API provided by browsers.  
It allows you to easily animate transitions between different UI states.

```html
<style>
    @keyframes fillUp {
        from {
            clip-path: inset(100% 0 0 0);
            opacity: 1;
        }
        to {
            clip-path: inset(0 0 0 0);
            opacity: 1;
        }
    }
    @keyframes fadeOut {
        from {
            opacity: 1;
        }
        to {
            opacity: 1;
        }
    }

    ::view-transition-old(bellIcon) {
        animation: fadeOut 0.4s linear;
        z-index: 1;
    }

    ::view-transition-new(bellIcon) {
        animation: fillUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 2;
    }
</style>

<div class="position-relative mb-5">
    <button type="button" class="blue-menu-item btn">
        <span id="bellIcon" class="blue-menu-item-icon" aria-hidden="true" style="view-transition-name: bellIcon"
            ><svg
                xmlns="http://www.w3.org/2000/svg"
                width="1em"
                height="1em"
                fill="currentColor"
                class="bi bi-bell"
                viewBox="0 0 16 16"
            >
                <path
                    d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2M8 1.918l-.797.161A4 4 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4 4 0 0 0-3.203-3.92zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5 5 0 0 1 13 6c0 .88.32 4.2 1.22 6"
                /></svg
            ><svg
                xmlns="http://www.w3.org/2000/svg"
                width="1em"
                height="1em"
                fill="currentColor"
                class="bi bi-bell-fill d-none"
                viewBox="0 0 16 16"
            >
                <path
                    d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2m.995-14.901a1 1 0 1 0-1.99 0A5 5 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901"
                /></svg
        ></span>
        <span class="blue-menu-item-label">Parent</span>
    </button>
    <div
        id="targetMenu"
        class="blue-menu-item-dropdown d-inline-flex flex-column text-body"
        style="--blue-menu-item-dropdown-bg: var(--bs-body-bg);"
    >
        <button type="button" class="blue-menu-item btn">
            <span class="blue-menu-item-icon" aria-hidden="true">🌍</span>
            <span class="blue-menu-item-label">Child</span>
        </button>
    </div>
</div>

<div id="itemsToAdd" class="d-inline-flex flex-column">
    <button type="button" class="blue-menu-item btn" style="view-transition-name: newItem1">
        <span class="blue-menu-item-icon" aria-hidden="true">🌑</span>
        <span class="blue-menu-item-label">Child 2</span>
    </button>
    <button type="button" class="blue-menu-item btn" style="view-transition-name: newItem2">
        <span class="blue-menu-item-icon" aria-hidden="true">🚀</span>
        <span class="blue-menu-item-label">Child 3</span>
    </button>
</div>

<script>
    function moveItem(item) {
        document.getElementById("targetMenu").appendChild(item)
        document.querySelector("#bellIcon .bi-bell").classList.add("d-none")
        document.querySelector("#bellIcon .bi-bell-fill").classList.remove("d-none")
    }

    document.addEventListener("DOMContentLoaded", () => {
        for (const item of document.querySelectorAll("#itemsToAdd > button")) {
            ;(() => {
                item.addEventListener("click", () => {
                    // Fallback for browsers that don't support this API:
                    if (!document.startViewTransition) {
                        moveItem(item)
                        return
                    }

                    // With a View Transition:
                    document.startViewTransition(() => moveItem(item))
                })
            })()
        }
    })
</script>
```

## Typography

Since Blue Web builds on top of Bootstrap, you should also check out [their section about typography](https://getbootstrap.com/docs/5.3/content/typography/).

### Inter as font family

Blue Web is configured to use [Inter](https://rsms.me/inter/) with some preset font features. The required font files aren't included with Blue Web.
[Please take a look at the documentation by Inter](https://github.com/rsms/inter?tab=readme-ov-file#using--installing-inter) to find out how to install them.

As fallback, when Inter couldn't be loaded, the default font family setting by Bootstrap (`$font-family-sans-serif`) will be used, which is a native font stack that selects the best font-family for each OS and device.