---
url: /docs/about.md
---
# About

Winduum is a mix of words **Tailwind** *(Popular CSS utility framework)* and **Tuum** *(Estonian word for "core")*.

It essentially provides ways to leverage use of **modern and accessible standards** as much possible. Because we ❤️ CSS and this is a small modest CSS component framework.

Its approach to **TailwindCSS** is a little different.
It encourages writing components in CSS or other
(pre/post)-processors and to use utility classes to enhance the components.

As a CSS library, it provides beautifully styled accessible components. Which you can extend with your own components.

It is very modular and split to `base`, `components` and `utilities` layers.

You can choose what you want to use and make your own complex UX/UI project written in whatever you want.

## Why?

The question inevitably arises: Why introduce yet another UI component library into the mix? Simply because Winduum is different in a few areas than the others.

1. It focuses on web standards, accessibility and minimum simple code
2. It's progressive, uses modern features and standards
3. It's framework-agnostic, so it can be used in any scenario
4. Its source code is plain CSS and JS, so it can be also used without a build step

## Framework-agnostic

Winduum is **framework-agnostic**, so you are able to create your own components using your preferred framework. Javascript primitives can be also adapted in any framework.

If there is interest, pre-built components may be developed for popular frameworks.
Currently,
only [`winduum-vue`](https://www.github.com/winduum/winduum-vue) and [`winduum-react`](https://www.github.com/winduum/winduum-react) are available
and most of the components have usage and installation examples in the docs.

Want to help? We're open for pull requests!

## Modern CSS Features

Staying ahead of the curve, Winduum leverages modern CSS features, allowing you to harness the power of the latest specifications and improve overall styling capabilities. All of these are supported in current browsers.

* **CSS Properties**
* **CSS Logical Properties**
* **CSS Nesting**
* **CSS color-mix**
* **Modern pseudo selectors** such as `:where`, `:is` and `:has`
* **Modern CSS reset**
* **View Transition API, Dialog API, Popover API** and more!
* **Low specifity or layers**

**Winduum** is all about accessibility and web standards that can be used in any framework.

## Naming

In your projects it's recommended to prefix component classes for better clarity. Some of these are already used for various components.

* **Component** - `x-name` (with prefix, every component is prefixed)
* **Utilities** - `name` (without prefix, utility classes for common styles)

## CSS Properties

Each CSS property follows the same naming, for example `--x-name-font-size`

## Directory structure

To help navigate your project easily,
it's recommended to follow the same naming principles for your directory structure, for example, like this:

* 📁 **base**
* 📁 **components**
* 📁 **theme**
* 📁 **utilities** or **utils**

## Examples

### Using the components

You can use any of the components easily in HTML without the need to write complex TailwindCSS classes.

Each component is written with low specificity in mind, so any property can be easily enhanced with TailwindCSS utility classes.

::: code-group

```html
<button class="x-button accent-main">This is a Button</button>
```

```css
.x-button {
    --x-button-font-size: 0.875rem;
    
    /* CSS styles */
}
```

:::

### Writing the components

You can write your own components using the same approach

::: code-group

```html
<div class="x-hello-world bg-dark rounded-md">Hello world</div>
```

```css
.x-hello-world {
    --x-hello-world-font-size: 2rem;
    
    /* CSS styles */
}
```

:::

It's recommended to use TailwindCSS utility classes for most cases. If you want to style some elements in CSS inside the component, consider creating a new component.

If you don't want to create a new component, don't use complex conventions like BEM.
It's recommended
to use something like [part](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part) attribute.
For example `data-part="body"`

```css
.x-hello-world {
  :where([data-part~"body"]) {
    /* CSS styles */
  }
}
```

This way you can tell that it's an element related to the parent component.

In rare cases you want to prevent possible class conflicts you can add name of the component inside the class like this `x-hello-world:body`.

---

---
url: /docs/utilities/accent.md
---
# Accent

Provides a new TailwindCSS utility class `accent` which extends [Accent](https://tailwindcss.com/docs/accent) utility classe.

## TailwindCSS v4

Include CSS file with the `@utility` at-rule.

```css
@import "winduum/tailwindcss/utilities/accent.css";
```

## TailwindCSS v3

Add plugin via the `tailwind.config.js`, see [Config](/docs/base/config#tailwind-css-v3) for more info.

## Example

```html
<div class="accent-error">
    <button class="x-button">Button</button>
    <button class="x-button rounded-full">Button</button>
</div>
```

---

---
url: /docs/utilities/animation.md
---
# Animation

Provides a new utility class `animation` and TailwindCSS utility class `animation-*` for `animation-name` property.

You should use this together with [Keyframes](/docs/base/keyframes) or use your own animation keyframes.

### Dependencies

* [tailwindcss](https://tailwindcss.com/) (TailwindCSS v4 @utility)
* [winduum](/docs/base/config.html#tailwind-css-v3) (TailwindCSS v3 plugin)

## TailwindCSS v4

You can add more via the `@theme` at-rule, see [Config](/docs/base/config#tailwind-css-v4) for more info.
Include CSS file with the `@utility` at-rule.

```css
@import "winduum/tailwindcss/utilities/animation.css";
```

### Example

```css
@theme {
    --animation-fade-in: fade-in;
}
```

```html
<div class="animation animation-fade-in">
    Content
</div>
```

```css
.animation {
    animation-duration: var(--default-animation-duration, var(--default-transition-duration));
    animation-fill-mode: both;
}

.animation-fade-in {
  animation-name: var(--animation-fade-in);
}
```

or use arbitrary value

```html
<div class="animation animation-[fade-in]">
    Content
</div>
```

```css
.animation {
    animation-duration: var(--default-animation-duration, var(--default-transition-duration));
    animation-fill-mode: both;
}

.animation-fade-in {
  animation-name: fade-in;
}
```

## TailwindCSS v3

You can add more via the `tailwind.config.js`, see [Config](/docs/base/config#tailwind-css-v3) for more info.

### Example

```html
<div class="animation animation-fade-in">
    Content
</div>
```

```css
.animation {
    animation-duration: var(--default-animation-duration, var(--default-transition-duration));
    animation-fill-mode: both;
}

.animation-fade-in {
  animation-name: fade-in;
}
```

---

---
url: /docs/components/badge.md
---
# Badge

### Usage

```css
@import "winduum/src/components/badge/index.css" layer(utilities);
```

### Variants

### Props

### Tokens

* `bordered`&#x20;
* `muted`&#x20;
* `sm`&#x20;
* `lg`&#x20;
* `square`&#x20;
* `circle`&#x20;

### Installation

Follow instructions for individual framework usage below

## Examples

### Basic

```html \[html]
<div class="x-badge">Badge</div>
<div class="x-badge rounded-full">Badge</div>
```

```vue
<script setup lang="ts">
    import { Badge } from '@/components/badge'
</script>

<template>
  <Badge>Badge</Badge>
  <Badge class="rounded-full">Badge</Badge>
</template>
```

```jsx
import { Badge } from "@/components/badge"

export function Example() {
    return (
        <>
            <Badge>Badge</Badge>
            <Badge className="rounded-full">Badge</Badge>
        </>
    )
}
```

:::

### Flat

```html
<div class="x-badge accent-primary">Primary</div>
<div class="x-badge accent-main">Main</div>
<div class="x-badge accent-success">Success</div>
<div class="x-badge accent-error">Error</div>
<div class="x-badge accent-warning">Warning</div>
<div class="x-badge accent-info">Info</div>
<div class="x-badge accent-dark">Dark</div>
<div class="x-badge accent-light text-dark">Light</div>
```

### Bordered

```html
<div class="x-badge bordered accent-primary">Primary</div>
<div class="x-badge bordered accent-main">Main</div>
<div class="x-badge bordered accent-success">Success</div>
<div class="x-badge bordered accent-error">Error</div>
<div class="x-badge bordered accent-warning">Warning</div>
<div class="x-badge bordered accent-info">Info</div>
<div class="x-badge bordered accent-dark">Dark</div>
<div class="x-badge bordered accent-light">Light</div>
```

### Muted

```html
<div class="x-badge muted accent-primary">Primary</div>
<div class="x-badge muted accent-main">Main</div>
<div class="x-badge muted accent-success">Success</div>
<div class="x-badge muted accent-error">Error</div>
<div class="x-badge muted accent-warning">Warning</div>
<div class="x-badge muted accent-info">Info</div>
<div class="x-badge muted accent-dark">Dark</div>
<div class="x-badge muted accent-light">Light</div>
```

### Small

```html
<div class="x-badge sm">Badge</div>
```

### Large

```html
<div class="x-badge lg">Badge</div>
```

### Square

```html
<div class="x-badge square">1</div>
<div class="x-badge square bordered">2</div>
<div class="x-badge square muted">
    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
    </svg>
</div>
```

### Circle

```html
<div class="x-badge circle">1</div>
<div class="x-badge circle bordered">2</div>
<div class="x-badge circle muted">
    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
    </svg>
</div>
```

### Icon

```html
<div class="x-badge muted">
    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
    </svg>
    Badge
</div>
<div class="x-badge bordered">
    Badge
    <svg>
        <use href="#icon-adjustments-vertical"></use>
    </svg>
</div>
<button class="x-badge square">
    <svg>
        <use href="#icon-adjustments-vertical"></use>
    </svg>
</button>
<svg hidden>
    <symbol id="icon-adjustments-vertical" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
    </symbol>
</svg>
```

### Custom

```css
.x-badge {
    --x-badge-block-size: 1rem;
    --x-badge-padding-block: 0;
    --x-badge-padding-inline: 1rem;
    --x-badge-border-radius: 0;
    --x-badge-font-size: 0.75rem;
    --x-badge-font-weight: 700;
    --x-badge-background-color: yellow;
    --x-badge-color: #333;
}
```

You can also extend the badge with any TailwindCSS class to customize it

```html
<button class="x-badge bg-gray-200 text-dark">Badge</button>
```

### Group

You can group badges into groups via `x-group` component.

```html
<div class="x-group">
    <div class="x-badge">Badge</div>
    <div class="x-badge">Badge</div>
    <div class="x-badge">Badge</div>
</div>
<div class="x-group">
    <div class="x-badge bordered">Badge</div>
    <div class="x-badge bordered">Badge</div>
    <div class="x-badge bordered">Badge</div>
</div>
<div class="x-group">
    <div class="x-badge muted">Badge</div>
    <div class="x-badge muted">Badge</div>
    <div class="x-badge muted">Badge</div>
</div>
<div class="x-group">
    <div class="x-badge bg-gray-200 text-dark">
        <span>npm</span>
    </div>
    <div class="x-badge bg-info">
        <span>7.1.2</span>
    </div>
</div>
```

---

---
url: /docs/components/breadcrumb.md
---
# Breadcrumb

### Usage

```css
@import "winduum/src/components/breadcrumb/index.css" layer(utilities);
```

### Variants

### Props

### Installation

Follow instructions for individual framework usage below

## Example

```html
<nav class="x-breadcrumb text-sm" aria-label="breadcrumb">
    <ol>
        <li>
            <a href="#" class="x-link flex" title="Home">
                <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                </svg>
            </a>
        </li>
        <li>
            <a href="#" class="x-link" title="">
                User
            </a>
        </li>
        <li>
            <a href="#" class="x-link opacity-50 pointer-events-none" aria-current="location" title="">
                Documents
            </a>
        </li>
    </ol>
</nav>
```

---

---
url: /docs/base/breakpoints.md
---
# Breakpoints

Breakpoints in Winduum are very close to TailwindCSS, yet they have slightly different values and extended to cover all possible resolutions.

You can use the same principles as defined in [Responsive design](https://tailwindcss.com/docs/responsive-design)

* **xs** - 360px
* **sm** - 416px
* **md** - 744px
* **lg** - 960px
* **xl** - 1216px
* **2xl** - 1312px
* **3xl** - 1408px
* **4xl** - 1600px
* **xxl** - 2016px
* **2xxl** - 2528px

Breakpoints are defined in [`src/base/breakpoints.css`](https://github.com/winduum/winduum/blob/main/src/base/breakpoints.css) and in [config#screens](/docs/base/config#screens)
(TailwindCSS `v3`)
or [`tailwindcss/theme/config/breakpoint.css`](https://github.com/winduum/winduum/blob/main/tailwindcss/theme/config/breakpoint.css)
(TailwindCSS `v4`)

You can also use the breakpoints inside CSS like this.

```postcss
@media (--media-md) {
    /* > 768 */
}

@media not all and (--media-md) {
    /* < 768 */
}
```

[Custom Media Specification](https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-media) is used, so PostCSS or LightningCSS is required, see [Install](/docs/) for more info.

---

---
url: /docs/components/button.md
---
# Button

### Usage

```css
@import "winduum/src/components/button/index.css" layer(utilities);
```

### Variants

### Props

### Tokens

* `bordered`&#x20;
* `muted`&#x20;
* `raised`&#x20;
* `ghosted`&#x20;
* `sm`&#x20;
* `lg`&#x20;
* `square`&#x20;
* `circle`&#x20;
* `fill`&#x20;

### Installation

Follow instructions for individual framework usage below

## Examples

### Basic

```html \[html]
<button class="x-button">Button</button>
<button class="x-button rounded-full">Button</button>
```

```vue
<script setup lang="ts">
    import { Button } from '@/components/button'
</script>

<template>
  <Button>Button</Button>
  <Button class="rounded-full">Button</Button>
</template>
```

```jsx
import { Button } from "@/components/button"

export function Example() {
    return (
        <>
            <Button>Button</Button>
            <Button className="rounded-full">Button</Button>
        </>
    )
}
```

:::

### Flat

```html
<button class="x-button accent-primary">Primary</button>
<button class="x-button accent-main">Main</button>
<button class="x-button accent-success">Success</button>
<button class="x-button accent-error">Error</button>
<button class="x-button accent-warning">Warning</button>
<button class="x-button accent-info">Info</button>
<button class="x-button accent-dark">Dark</button>
<button class="x-button accent-light text-dark">Light</button>
```

### Bordered

```html
<button class="x-button bordered accent-primary">Primary</button>
<button class="x-button bordered accent-main">Main</button>
<button class="x-button bordered accent-success">Success</button>
<button class="x-button bordered accent-error">Error</button>
<button class="x-button bordered accent-warning">Warning</button>
<button class="x-button bordered accent-info">Info</button>
<button class="x-button bordered accent-dark">Dark</button>
<button class="x-button bordered accent-light">Light</button>
```

### Muted

```html
<button class="x-button muted accent-primary">Primary</button>
<button class="x-button muted accent-main">Main</button>
<button class="x-button muted accent-success">Success</button>
<button class="x-button muted accent-error">Error</button>
<button class="x-button muted accent-warning">Warning</button>
<button class="x-button muted accent-info">Info</button>
<button class="x-button muted accent-dark">Dark</button>
<button class="x-button muted accent-light">Light</button>
```

### Raised

```html
<button class="x-button raised accent-primary">Primary</button>
<button class="x-button raised accent-main">Main</button>
<button class="x-button raised accent-success">Success</button>
<button class="x-button raised accent-error">Error</button>
<button class="x-button raised accent-warning">Warning</button>
<button class="x-button raised accent-info">Info</button>
<button class="x-button raised accent-dark">Dark</button>
<button class="x-button raised accent-light text-dark">Light</button>
```

### Ghosted

```html
<button class="x-button ghosted accent-primary">Primary</button>
<button class="x-button ghosted accent-main">Main</button>
<button class="x-button ghosted accent-success">Success</button>
<button class="x-button ghosted accent-error">Error</button>
<button class="x-button ghosted accent-warning">Warning</button>
<button class="x-button ghosted accent-info">Info</button>
<button class="x-button ghosted accent-dark">Dark</button>
<button class="x-button ghosted accent-light">Light</button>
```

### Small

```html
<button class="x-button sm">Button</button>
```

### Large

```html
<button class="x-button lg">Button</button>
```

### Square

```html
<button class="x-button square">1</button>
<button class="x-button square outline">2</button>
<button class="x-button square muted">
    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
    </svg>
</button>
```

### Circle

```html
<button class="x-button circle">1</button>
<button class="x-button circle bordered">2</button>
<button class="x-button circle muted">
    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
    </svg>
</button>
```

### Icon

```html
<button class="x-button muted">
    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
    </svg>
    Button
</button>
<button class="x-button bordered">
    Button
    <svg>
        <use href="#icon-adjustments-vertical"></use>
    </svg>
</button>
<button class="x-button square">
    <svg>
        <use href="#icon-adjustments-vertical"></use>
    </svg>
</button>
<svg hidden>
    <symbol id="icon-adjustments-vertical" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
    </symbol>
</svg>
```

### Loading

```html
<button class="x-button" data-loading>
    Button
    <span class="spinner spinner-absolute"></span>
</button>
<button class="x-button muted" data-loading>
    Button
    <span class="spinner spinner-absolute"></span>
</button>
<button class="x-button bordered" data-loading>
    <span class="spinner spinner-circle"></span>
    Loading
</button>
```

### Active

```html
<button class="x-button active">
    Button
</button>
<button class="x-button muted active">
    Button
</button>
<button class="x-button bordered active">
    Button
</button>
```

### Disabled

```html
<button class="x-button" disabled>
    Button
</button>
<button class="x-button muted" disabled>
    Button
</button>
<button class="x-button bordered" disabled>
    Button
</button>
```

### Custom

```html
<button class="x-custom">Button</button>
```

```css
.x-custom {
  --color-accent: yellow;
  --color-accent-foreground: #333;
  --x-button-block-size: 4rem;
  --x-button-padding-block: 1rem;
  --x-button-padding-inline: 1rem;
  --x-button-border-radius: 0;
  --x-button-font-size: 1.15rem;
  --x-button-font-weight: 700;
  --x-button-hover-opacity: 40%;
  --x-button-focus-opacity: 80%;
}
```

You can also extend the button with any TailwindCSS class to customize it

```html
<button class="x-button bg-gray-200 text-dark">Button</button>
```

### Group

You can group buttons into groups via `x-group` component.

```html
<div class="x-group">
    <button class="x-button">Button</button>
    <button class="x-button">Button</button>
    <button class="x-button">Button</button>
</div>
<div class="x-group">
    <button class="x-button outline">Button</button>
    <button class="x-button outline">Button</button>
    <button class="x-button outline">Button</button>
</div>
<div class="x-group">
    <button class="x-button muted">Button</button>
    <button class="x-button muted">Button</button>
    <button class="x-button muted">Button</button>
</div>
```

## Custom Props

### default

| CSS property                          | Default value                    |
|---------------------------------------|----------------------------------|
| `--x-button-inline-size`              | `initial`                        |
| `--x-button-block-size`               | `2.25rem`                        |
| `--x-button-padding-block`            | `0.375rem`                       |
| `--x-button-padding-inline`           | `0.75rem`                        |
| `--x-button-border-radius`            | `var(--radius, 0.75rem)`         |
| `--x-button-font-family`              | `initial`                        |
| `--x-button-font-size`                | `var(--font-size-sm, 0.875rem)`  |
| `--x-button-font-weight`              | `var(--font-weight-medium, 500)` |
| `--x-button-letter-spacing`           | `initial`                        |
| `--x-button-background-color-space`   | `srgb`                           |
| `--x-button-background-color`         | `var(--color-accent)`            |
| `--x-button-background-color-opacity` | `100%`                           |
| `--x-button-background-color-mix`     | `transparent`                    |
| `--x-button-color-space`              | `srgb`                           |
| `--x-button-color`                    | `var(--color-accent-foreground)` |
| `--x-button-color-opacity`            | `100%`                           |
| `--x-button-color-mix`                | `transparent`                    |
| `--x-button-border-width`             | `0px`                            |
| `--x-button-border-color-space`       | `srgb`                           |
| `--x-button-border-color`             | `var(--color-accent)`            |
| `--x-button-border-color-opacity`     | `100%`                           |
| `--x-button-border-color-mix`         | `transparent`                    |
| `--x-button-outline-width`            | `2px`                            |
| `--x-button-outline-color-space`      | `srgb`                           |
| `--x-button-outline-color`            | `transparent`                    |
| `--x-button-outline-color-opacity`    | `100%`                           |
| `--x-button-outline-color-mix`        | `transparent`                    |
| `--x-button-outline-offset`           | `initial`                        |
| `--x-button-gap`                      | `var(--spacing-2, 0.5rem)`       |

### interactive

| CSS property                                   | Default value                              |
|------------------------------------------------|--------------------------------------------|
| `--x-button-transition-property`               | `var(--default-transition-property)`       |
| `--x-button-timing-function`                   | `var(--transition-timing-function-in-out)` |
| `--x-button-transition-duration`               | `var(--default-transition-duration)`       |
| `--x-button-hover-background-color`            | `var(--color-accent)`                      |
| `--x-button-hover-background-color-mix`        | `var(--color-dark)`                        |
| `--x-button-hover-background-color-opacity`    | `80%`                                      |
| `--x-button-hover-border-color`                | `var(--color-accent)`                      |
| `--x-button-hover-border-color-mix`            | `transparent`                              |
| `--x-button-hover-border-color-opacity`        | `100%`                                     |
| `--x-button-hover-color`                       | `var(--color-accent-foreground)`           |
| `--x-button-hover-color-mix`                   | `transparent`                              |
| `--x-button-hover-color-opacity`               | `100%`                                     |
| `--x-button-focus-outline-offset`              | `2px`                                      |
| `--x-button-focus-outline-color`               | `var(--color-accent)`                      |
| `--x-button-focus-outline-color-opacity`       | `50%`                                      |
| `--x-button-active-background-color`           | `var(--color-accent)`                      |
| `--x-button-active-background-color-mix`       | `var(--color-dark)`                        |
| `--x-button-active-background-color-opacity`   | `90%`                                      |
| `--x-button-active-border-color`               | `var(--color-accent)`                      |
| `--x-button-active-border-color-mix`           | `transparent`                              |
| `--x-button-active-border-color-opacity`       | `100%`                                     |
| `--x-button-active-color`                      | `var(--color-accent-foreground)`           |
| `--x-button-active-color-mix`                  | `transparent`                              |
| `--x-button-active-color-opacity`              | `100%`                                     |
| `--x-button-disabled-background-color`         | `var(--color-accent)`                      |
| `--x-button-disabled-background-color-mix`     | `transparent`                              |
| `--x-button-disabled-background-color-opacity` | `50%`                                      |
| `--x-button-disabled-border-color`             | `var(--color-accent)`                      |
| `--x-button-disabled-border-color-mix`         | `transparent`                              |
| `--x-button-disabled-border-color-opacity`     | `50%`                                      |
| `--x-button-disabled-color`                    | `var(--color-accent-foreground)`           |
| `--x-button-disabled-color-mix`                | `transparent`                              |
| `--x-button-disabled-color-opacity`            | `50%`                                      |

---

---
url: /docs/components/card.md
---
# Card

### Usage

```css
@import "winduum/src/components/card/index.css" layer(utilities);
```

### Variants

### Props

### Installation

Follow instructions for individual framework usage below

## Examples

### Default

```html
<div class="x-card border border-body-tertiary shadow-sm max-w-md gap-2">
    <div class="x-heading">Card title</div>
    <div class="x-text">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Lorem ipsum dolor sit amet
    </div>
</div>
```

### Image

```html
<div class="x-card p-0 border border-body-tertiary shadow-sm max-w-md">
    <img src="https://placehold.co/400x300/333/webp" alt="" width="400" height="300" class="aspect-video w-full h-auto rounded-t-[inherit] object-cover">
    <div class="flex flex-col gap-2 px-(--x-card-padding-inline) py-(--x-card-padding-block)">
        <div class="x-heading">Card title</div>
        <div class="x-text">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Lorem ipsum dolor sit amet
        </div>
    </div>
</div>
```

---

---
url: /docs/components/carousel.md
---
# Carousel

Provides a scroll carousel that uses native CSS `scroll-snap` property.

### Usage

::: code-group

```css
@import "winduum/src/components/carousel/index.css" layer(utilities);
```

```liquid \[js]
<script type="module">
    import { scrollPrev, scrollNext, observeCarousel } from "winduum/src/components/carousel";

    const contentElement = document.querySelector('[data-x-carousel-target="content"]')
    const prevElement = document.querySelector('[data-action="click->x-carousel#prev"]')
    const nextElement = document.querySelector('[data-action="click->x-carousel#next"]')

    observeCarousel(contentElement)

    prevElement.addEventListener('click', () => scrollPrev(contentElement))
    nextElement.addEventListener('click', () => scrollNext(contentElement))
</script>
```

### Variants

### Installation

Follow instructions for individual framework usage below

## Examples

### Basic

```liquid \[js]
<script type="module">
    import { scrollPrev, scrollNext, observeCarousel } from "winduum/src/components/carousel";

    const contentElement = document.querySelector('[data-x-carousel-target="content"]')
    const prevElement = document.querySelector('[data-action="click->x-carousel#prev"]')
    const nextElement = document.querySelector('[data-action="click->x-carousel#next"]')

    observeCarousel(contentElement)

    prevElement.addEventListener('click', () => scrollPrev(contentElement))
    nextElement.addEventListener('click', () => scrollNext(contentElement))
</script>
```

### Full

```liquid \[js]
<script type="module">
    import { scrollPrev, scrollNext, observeCarousel, dragCarousel, paginationCarousel, scrollCarousel } from "winduum/src/components/carousel";

    const contentElement = document.querySelector('[data-x-carousel-target="content"]')
    const paginationElement = document.querySelector('[data-x-carousel-target="pagination"]')
    const progressElement = document.querySelector('[data-x-carousel-target="progress"]')
    const counterMinElement = document.querySelector('[data-x-carousel-target="counterMin"]')
    const counterMaxElement = document.querySelector('[data-x-carousel-target="counterMax"]')
    const prevElement = document.querySelector('[data-action="click->x-carousel#prev"]')
    const nextElement = document.querySelector('[data-action="click->x-carousel#next"]')

    const pagination = {
        element: paginationElement,
        itemContent: '<div class="dot data-[active]:bg-error"></div>'
    }

    const scrollOptions = {
        counterMinElement,
        counterMaxElement,
        progressElement,
        pagination
    }

    dragCarousel(contentElement)

    observeCarousel(contentElement)

    paginationCarousel(contentElement, pagination)

    scrollCarousel(contentElement, scrollOptions)

    contentElement.addEventListener('scroll', () => scrollCarousel(contentElement, scrollOptions), { passive: true })
    prevElement.addEventListener('click', () => scrollPrev(contentElement))
    nextElement.addEventListener('click', () => scrollNext(contentElement))
</script>
```

## Javascript API

### `scrollTo`

* **Type:** `(element: HTMLElement | Element, index: number) => void`
* **Kind:** `sync`

Scroll to a snap item by its index.

### `scrollNext`

* **Type:** `(element: HTMLElement | Element) => void`
* **Kind:** `sync`

Scroll to the next snap item.

### `scrollPrev`

* **Type:** `(element: HTMLElement | Element) => void`
* **Kind:** `sync`

Scroll to a previous snap item.

### `getItemCount`

* **Type:** `(element: HTMLElement | Element, scrollWidth: number, mathFloor: boolean) => number`
* **Kind:** `sync`

Get the number of possible scrolls inside the carousel.

### `observeCarousel`

* **Type:** `(element: HTMLElement | Element, options?: ObserveCarouselOptions) => void`
* **Kind:** `sync`

Adds an observer for the carousel. Adds properties `_observer` and `_activeIndex` to the DOM of the carousel `element`.

#### ObserveCarouselOptions

***

##### visibleAttribute

* **Type:** `string`
* **Default:** `data-visible`

A class that is added to the carousel items once they are visible.

***

##### observerOptions

* **Type:** `IntersectionObserverInit`
* **Default:** `{ threshold: 0.5 }`

Additional [options](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options) confugration for the observer.

***

### `dragCarousel`

* **Type:** `(element: HTMLElement | Element, options?: DragCarouselOptions) => void`
* **Kind:** `sync`

Adds a mouse dragging capability to the carousel.

#### DragCarouselOptions

***

##### activeAttribute

* **Type:** `string`
* **Default:** `data-grabbing`

***

### `paginationCarousel`

* **Type:** `(element: HTMLElement | Element, options?: PaginationCarouselOptions) => void`
* **Kind:** `sync`

Inserts pagination indicators for the carousel to the desired element.

#### PaginationCarouselOptions

***

##### element

* **Type:** `HTMLElement | Element`
* **Default:** `undefined`

***

##### itemContent

* **Type:** `string`
* **Default:** `<div aria-hidden="true"></div>`

***

##### activeAttribute

* **Type:** `string`
* **Default:** `data-active`

***

### `autoplayCarousel`

* **Type:** `(element: HTMLElement | Element, options?: AutoplayCarouselOptions) => void`
* **Kind:** `sync`

Adds an autoplay for the carousel.

#### AutoplayCarouselOptions

***

##### delay

* **Type:** `number`
* **Default:** `4000`

Delay in ms.

***

##### pauseElements

* **Type:** `HTMLElement[] | Element[]`
* **Default:** `[]`

Which elements should pause the autoplay upon hover.

***

### `scrollCarousel`

* **Type:** `(element: HTMLElement | Element, options?: ScrollCarouselOptions) => void`
* **Kind:** `sync`

A helper function that updates various carousel states upon scroll.

#### ScrollCarouselOptions

***

##### observe

* **Type:** `ObserveCarouselOptions`
* **Default:** `undefined`

***

##### pagination

* **Type:** `PaginationCarouselOptions`
* **Default:** `{ activeClass: 'active' }`

***

##### progressElement

* **Type:** `HTMLProgressElement | Element`
* **Default:** `undefined`

***

##### counterMinElement

* **Type:** `HTMLElement | Element`
* **Default:** `undefined`

***

##### counterMaxElement

* **Type:** `HTMLElement | Element`
* **Default:** `undefined`

---

---
url: /docs/components/check.md
---
# Check

Check supports `checkbox` and `radio` **input** types

### Usage

```css
@import "winduum/src/components/check/index.css" layer(utilities);
```

### Variants

### Props

### Installation

Follow instructions for individual framework usage below

## Examples

### Basic

```html \[html]
<div class="x-check">
    <input type="checkbox">
    Checkbox
</div>
<label class="x-check">
    <input type="checkbox">
</label>
```

```vue
<script setup lang="ts">
    import { Check } from '@/components/check'
</script>

<template>
    <Check>
        <input type="checkbox">
        Checkbox
    </Check>
    <Check>
        <input type="checkbox">
    </Check>
</template>
```

```jsx
import { Check } from "@/components/check"

export function Example() {
    return (
        <>
            <Check>
                <input type="checkbox" />
                Checkbox
            </Check>
            <Check>
                <input type="checkbox" />
            </Check>
        </>
    )
}
```

:::

```html \[html]
<div class="x-check">
    <input type="radio" name="radio">
    Radio
</div>
<label class="x-check">
    <input type="radio" name="radio">
</label>
```

```vue
<script setup lang="ts">
    import { UiCheck } from '@/components/check'
</script>

<template>
    <UiCheck>
        <input type="radio">
        Radio
    </UiCheck>
    <UiCheck>
        <input type="radio">
    </UiCheck>
</template>
```

```jsx
import { UiCheck } from "@/components/check"

export function Example() {
    return (
        <>
            <UiCheck>
                <input type="radio" />
                Radio
            </UiCheck>
            <UiCheck>
                <input type="radio" />
            </UiCheck>
        </>
    )
}
```

:::

### Label

```html
<div class="x-check">
    <input type="checkbox" id="checkbox">
    <label for="checkbox">Checkbox</label>
</div>
```

```html
<div class="x-check">
    <input type="radio" id="radio">
    <label for="radio">Radio</label>
</div>
```

### Required

```html
<div class="x-check">
    <input type="checkbox" id="checkbox" required>
    <label for="checkbox">Checkbox</label>
</div>
```

```html
<div class="x-check">
    <input type="radio" id="radio" required>
    <label for="radio">Radio</label>
</div>
```

### Disabled

```html
<div class="x-check">
    <input type="checkbox" disabled>
    Checkbox
</div>
<label class="x-check">
    <input type="checkbox" disabled>
</label>
```

```html
<div class="x-check">
    <input type="radio" disabled>
    Radio
</div>
<label class="x-check">
    <input type="radio" disabled>
</label>
```

### Validation

```html
<form class="validated">
    <div class="x-check">
        <input type="checkbox" id="checkbox" required>
        <label for="checkbox">Checkbox</label>
    </div>
</form>
```

```html
<form class="validated">
    <div class="x-check">
        <input type="radio" id="radio" required>
        <label for="radio">Radio</label>
    </div>
</form>
```

---

---
url: /docs/components/color.md
---
# Color

Color supports `checkbox` and `radio` **input** types for displaying selected color.

### Usage

```css
@import "winduum/src/components/color/index.css" layer(utilities);
```

### Variants

### Props

### Installation

Follow instructions for individual framework usage below

## Examples

### Basic

```html \[html]
<label class="x-color" style="color: red">
    <input type="checkbox" aria-label="Red">
</label>
<label class="x-color" style="color: blue">
    <input type="checkbox" aria-label="Blue">
</label>
<label class="x-color" style="color: red; --x-color-secondary: blue;">
    <input type="checkbox" aria-label="Red & Blue">
</label>
```

```vue
<script setup lang="ts">
    import { Color } from '@/components/color'
</script>

<template>
    <Color style="color: red">
        <input type="checkbox" aria-label="Red">
    </Color>
    <Color style="color: blue">
        <input type="checkbox" aria-label="Blue">
    </Color>
    <Color style="color: red; --x-color-secondary: blue;">
        <input type="checkbox" aria-label="Red & Blue">
    </Color>
</template>
```

```jsx
import { Color } from "@/components/color"

export function Example() {
    return (
        <>
            <Color style="color: red">
                <input type="checkbox" aria-label="Red" />
            </Color>
            <Color style="color: blue">
                <input type="checkbox" aria-label="Blue" />
            </Color>
            <Color style="color: red; --x-color-secondary: blue;">
                <input type="checkbox" aria-label="Red & Blue" />
            </Color>
        </>
    )
}
```

:::

### Disabled

```html
<label class="x-color" style="color: red">
    <input type="checkbox" disabled>
</label>
<label class="x-color" style="color: blue">
    <input type="checkbox" disabled>
</label>
<label class="x-color" style="color: red; --x-color-secondary: blue;">
    <input type="checkbox" disabled>
</label>
```

---

---
url: /docs/colors.md
---
# Colors

There are few types of colors with various areas of use. Colors are defined in [Theme](/docs/base/theme).

## Common

## Main

## Body

## State

## Foreground

Each color has also it's foreground variant with `-foreground` postfix. So you can use foreground colors when needed, eg. `--color-primary-foreground`.

## Accent

The idea is that you should be able to set accent color via `accent-color` CSS property.
It is [discussed](https://github.com/w3c/csswg-drafts/issues/5900)
that you should have access to the color value of this property,
e.g. via `AccentColor` or `AccentColorText`.

Most of the components are using this idea via `--color-accent` and `--color-accent-foreground` as an alternative for their accent color.

```html
<div class="accent-error">
    <button class="x-button">Button</button>
    <button class="x-button rounded-full">Button</button>
</div>
```

For example, this way you don't have to change background-color property for each component color variant, you just change the accent color.

---

---
url: /docs/components/compare.md
---
# Compare

Side-by-side comparison slider component.

### Usage

```css
@import "winduum/src/components/compare/index.css" layer(utilities);
```

### Variants

### Installation

Follow instructions for individual framework usage below

## Examples

### Default

```liquid \[js]
<script type="module">
    import { setPosition, setKeyboardStep, setMouseStep } from 'winduum/src/components/compare/index.js'

    document.querySelectorAll('[data-action="compareInput"]').forEach(compareInput => {
        compareInput.addEventListener('input', setPosition)

        compareInput.addEventListener('keydown', setKeyboardStep)

        compareInput.addEventListener('mousedown', setMouseStep)
    })
</script>
```

### Text

```liquid \[js]
<script type="module">
    import { setPosition, setKeyboardStep, setMouseStep } from 'winduum/src/components/compare/index.js'

    document.querySelectorAll('[data-action="compareInput"]').forEach(compareInput => {
        compareInput.addEventListener('input', setPosition)

        compareInput.addEventListener('keydown', setKeyboardStep)

        compareInput.addEventListener('mousedown', setMouseStep)
    })
</script>
```

## Javascript API

### setPosition

* **Type:** `(element: HTMLInputElement, options?: SetPositionOptions) => void`
* **Kind:** `sync`

#### SetPositionOptions

***

##### selector

* **Type:** `string`
* **Default:** `.x-compare`

***

##### positionProperty

* **Type:** `string`
* **Default:** `--x-compare-position`

***

### setKeyboardStep

* **Type:** `(element: HTMLInputElement, key: string, step?: number) => void`
* **Kind:** `sync`

### setMouseStep

* **Type:** `(element: HTMLInputElement, step?: number) => void`
* **Kind:** `sync`

---

---
url: /docs/utilities/container.md
---
# Container

Provides a new approach to classic [Container](https://tailwindcss.com/docs/container) with a new utility class `grid-cols-container` which utilizes `grid` and is inspired by [Kevin Powell](https://youtu.be/c13gpBrnGEw?si=FGoMS9FnWEOYohPi).

```css
.grid-cols-container {
  grid-template-columns:
    [container-full-start] minmax(var(--container-padding), 1fr)
    [container-breakout-start] minmax(0, calc((var(--container-breakout-width) - var(--container-width)) / 2))
    [container-start] min(100% - (var(--container-padding) * 2), var(--container-width)) [container-end]
    minmax(0, calc((var(--container-breakout-width) - var(--container-width)) / 2)) [container-breakout-end]
    minmax(var(--container-padding), 1fr) [container-full-end];

  & > :where(*) {
    grid-column: container;
  }
}

```

## Example

Easy layout with `grid`

```html
<body class="grid grid-cols-container gap-4">
  <header class="col-[container-full] grid grid-cols-container bg-slate-300">Header Full Width</header>
  <main>Content in container</main>
  <footer class="col-[container-breakout]">Footer Breakout</footer>
</body>
```

In same cases classic approach is still handy, you can achieve that easily with `w`

```html
<div class="w-[--container] mx-auto">
    Content
</div>
```

---

---
url: /docs/components/control.md
---
# Control

Form control as it should be!

This component supports **input**, **select** and **textarea** including **all** [input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)

* `text`, `color`, `date`, `datetime-local`, `email`, `file`, `hidden`, `month`, `number`, `password`, `search`, `tel`, `time`, `url`, `week`

Other input types are supported in other components

* `checkbox`, `radio` - included in [Check](/docs/components/check), [Switch](/docs/components/switch), [Color](/docs/components/color) or [Rating](/docs/components/rating)
* `range` - included in [Range](/docs/components/range)
* `button`, `reset`, `submit` - included in [Button](/docs/components/button)

### Installation

Follow instructions for individual framework usage below

### Usage

```css
@import "winduum/src/components/control/index.css" layer(utilities);
```

### Variants

### Props

## Examples

### Basic

```html \[html]
<div class="x-control">
    <input type="text">
</div>
```

```vue
<script setup lang="ts">
    import { Control } from '@/components/control'
</script>

<template>
    <Control>
        <input type="text">
    </Control>
</template>
```

```jsx
import { Control } from "@/components/control"

export function Example() {
    return (
        <>
            <Control>
                <input type="text" />
            </Control>
        </>
    )
}
```

:::

### Icon

You can position any content to `start` and `end` of the control.Padding is automatically handled by CSS up to two icons, or you can do it manually.

* `--x-control-icon-count-start` - number of icons at the start of the control
* `--x-control-icon-count-end`- number of icons at the end of the control
* `--x-control-start` - manually change start padding in px according to content
* `--x-control-end` - manually change end padding in px according to content

```html
<div class="x-control">
    <input type="text" placeholder="Enter a value.." required>
    <div class="ms-auto">
        <svg class="text-error" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
        </svg>
        <span>EUR</span>
    </div>
</div>
<div class="x-control">
    <input type="text" placeholder="Enter a value.." required>
    <svg class="me-auto" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
    </svg>
</div>
```

```html
<div class="x-control">
    <select>
        <option selected="" value="">- select an option -</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <svg class="ms-auto text-error" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
    </svg>
    <label>Select</label>
</div>
<div class="x-control">
    <select>
        <option selected="" value="">- select an option -</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <svg class="me-auto" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
    </svg>
    <label>Select</label>
</div>
```

### Textarea

```html
<div class="x-control">
    <textarea id="textarea"></textarea>
</div>
```

### Select

```html
<div class="x-control">
    <select>
        <option selected="" value="">- select an option -</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
</div>
```

### Placeholder

```html
<div class="x-control">
    <input type="text" placeholder="Enter a value..">
</div>
```

### Label

```html
<div class="x-field">
    <label class="x-label" for="input">Label</label>
    <div class="x-control">
        <input type="text" id="input">
    </div>
</div>
```

```html
<div class="x-field">
    <label class="x-label mb-2" for="select">Select</label>
    <div class="x-control">
        <select id="select">
            <option selected="" value="">- select an option -</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
    </div>
</div>
```

### Floating Label

```html
<div class="x-control">
    <input type="text" id="input" placeholder=" ">
    <label for="input">Label</label>
</div>
```

```html
<div class="x-control">
    <select>
        <option selected="" value="">- select an option -</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <label>Select</label>
</div>
```

### Time

```html
<div class="x-control">
    <input type="time">
</div>
```

### Date

```html
<div class="x-control">
    <input type="date">
</div>
```

### Datetime

```html
<div class="x-control">
    <input type="datetime-local">
</div>
```

### Number

```html
<div class="x-control">
    <input type="number">
</div>
```

### Color

```html
<div class="x-control">
    <input type="color" id="color" oninput="this.nextElementSibling.textContent = this.value">
    <label for="color">#ffffff</label>
</div>
```

### File

```html
<div class="x-control">
    <input type="file">
</div>
```

### Required

```html
<div class="x-control">
    <input type="text" id="input" placeholder=" " required>
    <label for="input">Label</label>
</div>
```

### Validation

```html
<form class="validated">
    <div class="x-control">
        <input type="text" id="input" placeholder=" " required>
        <label for="input">Label</label>
    </div>
</form>
```

```html
<form class="validated">
    <div class="x-control">
        <select id="select" required>
            <option selected="" value="">- select an option -</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
        <label for="select">Select</label>
    </div>
</form>
```

### Disabled

```html
<div class="x-control">
    <input type="text" disabled placeholder="Disabled input ..">
</div>
```

```html
<div class="x-control">
    <select disabled>
        <option selected="" value="">- select an option -</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
</div>
```

### Group

You can group controls into groups via `x-group` component and combine them with other components like [Button](/docs/components/button)

```html
<div class="x-group">
    <div class="x-control bg-body-secondary w-(--x-control-block-size) flex items-center justify-center">
        @
    </div>
    <div class="x-control">
        <input type="tel" required>
    </div>
    <button class="x-button">Button</button>
</div>
```

---

---
url: /docs/base/config.md
---
# CSS config

Each CSS property is defined in CSS in following path - [`src/theme/config/index.css`](https://github.com/winduum/winduum/blob/main/src/theme/config/index.css).

We are using naming conventions from TailwindCSS `v4`,
so you can use these properties in both current and future versions of TailwindCSS or without TailwindCSS.

```css
@import "./font.css";
@import "./radius.css";
@import "./spacing.css";
@import "./transition.css";
@import "./z.css";

```

## Tailwind CSS v4

In the new version of TailwindCSS the configuration is done via CSS, so no plugin is necessary.
Most of the config CSS properties are also part of the new version.

```css
@import "tailwindcss/theme.css" layer(theme);
@import "winduum/tailwindcss/theme/config/index.css" layer(theme);
@import "winduum/tailwindcss/theme/default.css" layer(theme);
```

## Tailwind CSS v3

To add `winduum` to TailwindCSS v3, add folowing plugin to `tailwind.config.js` configuration file.

```js
import winduum from 'winduum'

export default {
  darkMode: 'class',
  content: [
    './node_modules/winduum/src/**/*.js',
    './src/**/*.{js,html}'
  ],
  plugins: [
    winduum({
        // config options
    })
  ],
}
```

You can customize config with options listed bellow.

This plugin disables by default following TailwindCSS corePlugins

* **preflight** - custom modern css reset is used, see [Reset](/docs/base/reset)

Winduum also exports useful helper functions you can use in your `tailwind.config.js`, see [`utils/tailwind.js`](https://github.com/winduum/winduum/blob/main/utils/tailwind.js) for more info.

### settings.rgb

Include `-rgb` color variants. Learn more about this in [Compatibility](/docs/base/theme.html#compatibility) section.

* **Type:** `boolean`
* **Default:** `false`

### settings.colorMix

Use `color-mix` in color variants instead of rgb. Learn more about this in [Compatibility](/docs/base/theme.html#compatibility) section.

* **Type:** `boolean`
* **Default:** `true`

### colors

* **Type:** `string[] | string`
* **Default:** `undefined`

These are additional color tokens that can be used with TailwindCSS as CSS custom properties, which can be then defined in `.css`. See [Colors](/docs/colors) for more info.
Or you can add a path to `.css` file containing the CSS custom properties, and it will be parsed automatically.

Example `bg-primary`:

```css
.bg-primary {
    background-color: color-mix(in sRGB, var(--color-primary) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}
```

### fontFamily

* **Type:** `string[] | string`
* **Default:** `undefined`

These are additional font-family tokens that can be used with TailwindCSS as CSS properties, which can be then defined in `.css`.
Or you can add a path to `.css` file containing the CSS custom properties, and it will be parsed automatically.

Example `font-primary`:

```css
.font-primary {
    font-family: var(--font-primary);
}
```

### fontWeight

* **Type:** `string[] | string`
* **Default:** `undefined`

These are additional font-weight tokens that can be used with TailwindCSS as CSS properties, which can be then defined in `.css`.
Or you can add a path to `.css` file containing the CSS custom properties, and it will be parsed automatically.

Example `font-bold`:

```css
.font-bold {
    font-weight: var(--font-bold);
}
```

### ease

* **Type:** `string[] | string`
* **Default:** `undefined`

These are additional transition easing tokens that can be used with TailwindCSS as CSS properties, which can be then defined in `.css`.
Or you can add a path to `.css` file containing the CSS custom properties, and it will be parsed automatically.

Example `ease-linear`:

```css
.ease-linear {
  transition-timing-function: var(--ease-linear);
}
```

### zIndex

* **Type:** `string[] | string`
* **Default:** `undefined`

These are additional z-index tokens that can be used with TailwindCSS as CSS properties, which can be then defined in `.css`.
Or you can add a path to `.css` file containing the CSS custom properties, and it will be parsed automatically.

Example `z-10`:

```css
.z-10 {
    z-index: var(--z-10);
}
```

### fontSize

* **Type:** `string[] | string`
* **Default:** `undefined`

These are additional `font-size` tokens that can be used with TailwindCSS as CSS properties, which can be then defined in `.css`.
Or you can add a path to `.css` file containing the CSS custom properties, and it will be parsed automatically.

Example `text-md`:

```css
.text-md {
    font-size: var(--font-size-md);
    line-height: calc(var(--font-size-md) + 0.5rem);
}
```

### spacing

* **Type:** `string[] | string`
* **Default:** `undefined`

These are additional spacing tokens that can be used with TailwindCSS as CSS properties, which can be then defined in `.css`.
Or you can add a path to `.css` file containing the CSS custom properties, and it will be parsed automatically.

Example `gap-4`:

```css
.gap-4 {
    gap: var(--spacing-4);
}
```

Example `px-4`:

```css
.px-4 {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}
```

### borderRadius

* **Type:** `string[] | string`
* **Default:** `undefined`

These are additional border-radius tokens that can be used with TailwindCSS as CSS properties, which can be then defined in `.css`.
Or you can add a path to `.css` file containing the CSS custom properties, and it will be parsed automatically.

Example `rounded-md`:

```css
.rounded-md {
    border-radius: var(--radius-md);
}
```

### animations

* **Type:** `string[]`
* **Default:** `['fade-in', 'fade-out', 'ripple', 'spin', 'move-indeterminate']`

These are additional animation tokens that can be used with TailwindCSS as CSS properties, which can be then defined in `.css`.
Or you can add a path to `.css` file containing the CSS custom properties, and it will be parsed automatically.

Example `animation-fade-in`:

```css
.animation-fade-in {
    animation-name: fade-in;
}
```

### mask

* **Type:** `string[] | string`
* **Default:** `undefined`

These are additional mask tokens that can be used with TailwindCSS as CSS properties, which can be then defined in `.css`.
Or you can add a path to `.css` file containing the CSS custom properties, and it will be parsed automatically.

Example `animation-fade-in`:

```css
.mask-check {
    mask: var(--mask-check)
}
```

### screens

* **Type:** `object`
* **Default:**

```js
{
  'xs': '22.5em',
  'sm': '26em',
  'md': '48em',
  'lg': '60em',
  'xl': '76em',
  '2xl': '82em',
  '3xl': '88em',
  '4xl': '100em',
  'xxl': '126em',
  '2xxl': '158em'
}
```

These are new media queries tokens that can be used with TailwindCSS, see more in [Breakpoints](/docs/base/breakpoints)

---

---
url: /docs/base/defaults.md
---
# Defaults

Default styles or rules applied to certain HTML elements or pseudo-elements. These are very much optional.

[`src/base/defaults.css`](https://github.com/winduum/winduum/blob/main/src/base/defaults.css)

```css
::selection {
  color: var(--color-primary-foreground);
  background-color: var(--color-primary);
}

:where([tabindex]) {
  outline: 0;
}

:where(button),
:where([type="checkbox"]),
:where([type="radio"]),
:where([role="button"]),
:where(summary) {
  touch-action: manipulation;
  user-select: none;
}

:where(button:enabled),
:where([type="checkbox"]:enabled),
:where([type="radio"]:enabled),
:where([role="button"]:not([aria-disabled="true"])),
:where(summary) {
  cursor: var(--cursor-pointer, pointer);
}

:where(svg:not([width])) {
  width: 1.25rem;
}

:where(svg:not([height])) {
  height: 1.25rem;
}

:where(hr) {
  background-color: color-mix(in var(--default-color-space), currentcolor 100%, transparent);
  block-size: 1px;
  inline-size: 100%;
}

:where(code) {
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
  background-color: var(--color-body-secondary);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
}

:where(kbd) {
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
  background: var(--color-body-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-body-tertiary);
}

:where(html) {
  color-scheme: var(--default-color-scheme);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-normal);
  block-size: 100%;
  line-height: 1.5;
  text-size-adjust: 100%;

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

:where(body) {
  min-block-size: 100%;
  background-color: var(--color-body);
  color: var(--color-main);
  accent-color: var(--color-accent);
}

[hidden] {
  display: none !important;
}

```

For TailwindCSS `v3` there are few rules such as resetting borders
and applying `--tw-content` to all pseudo-elements and zero border to all elements or pseudo-elements.

[`tailwindcss/base/defaults.css`](https://github.com/winduum/winduum/blob/main/tailwindcss/base/defaults.css)

## Cursor

Default `cursor: pointer` for clickable elements, you can change this globally via CSS property `--default-cursor` if you prefer more application like behavior.

## Svg

Set the default size of an SVG as a small square if neither width nor height is specified.

```html
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.25c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V2.75a.75.75 0 0 1 .75-.75 2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282m0 0h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904m10.598-9.75H14.25M5.904 18.5c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665c0 1.194.232 2.333.654 3.375Z" />
</svg>
```

## Hr

Just a horizontal rule.

```html
<hr>
```

## Code

```html
<code>Cool code</code>
```

## Kbd

```html
<kbd>Ctrl+C/⌘+C</kbd>
```

## Html & Body

Basic text and color properties

---

---
url: /docs/components/details.md
---
# Details

An accessible accordion or toggle component for `details` and `summary` elements.
Uses small external library `slide-element` for smooth toggle animations.

It is unstyled by default, so you can apply your own styles.

### Dependencies

* [slide-element](https://www.npmjs.com/package/slide-element)

### Usage

::: code-group

```shell
npm i slide-element
```

```html
<details class="x-details group bg-body-secondary rounded">
    <summary class="flex-center text-primary p-4" data-action="toggleDetails">
        <span class="x-title">Show more</span>
        <svg class="size-4 group-open:-scale-y-100 transition-transform" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
        </svg>
    </summary>
    <div style="display: none">
        <div class="p-4">
            Details content
        </div>
    </div>
</details>
```

```js
import { toggleDetails } from 'winduum/src/components/details'

document.querySelectorAll('[data-action="toggleDetails"]').forEach(summary => {
    summary.addEventListener('click', event => {
        if (event.currentTarget.tagName !== 'INPUT') event.preventDefault()

        toggleDetails(summary)
    })
})
```

:::

### Installation

Follow instructions for individual framework usage below

## Examples

### Default

```liquid \[js]
<script type="module">
    import { toggleDetails } from 'winduum/src/components/details/index.js'

    document.querySelectorAll('[data-action="toggleDetails"]').forEach(summary => {
        summary.addEventListener('click', event => {
            if (event.currentTarget.tagName !== 'INPUT') event.preventDefault()

            toggleDetails(summary)
        })
    })
</script>
```

### Checkbox

```liquid \[js]
<script type="module">
    import { toggleDetails } from 'winduum/src/components/details/index.js'

    document.querySelectorAll('[data-action="toggleDetails"]').forEach(summary => {
        summary.addEventListener('click', event => {
            if (event.currentTarget.tagName !== 'INPUT') event.preventDefault()

            toggleDetails(summary)
        })
    })
</script>
```

### Accordion

```liquid \[js]
<script type="module">
    import { toggleDetails, closeDetails } from 'winduum/src/components/details/index.js'

    document.querySelectorAll('[data-action="accordionDetails"]').forEach(summary => {
        summary.addEventListener('click', event => {
            event.preventDefault()

            const { currentTarget } = event

            closeDetails(currentTarget.closest('body').querySelector('details[open]:has([data-action="accordionDetails"]) summary'))

            toggleDetails(currentTarget)
        })
    })
</script>
```

## Javascript API

```typescript
interface DefaultOptions {
    selector?: string
    summarySelector?: string
}
```

### toggleDetails

* **Type:** `(selector:  HTMLInputElement | HTMLElement, options?: DefaultOptions) => Promise<void>`
* **Kind:** `async`

Toggles a details element, should be added on summary or anywhere inside the details element.

### showDetails

* **Type:** `(selector:  HTMLInputElement | HTMLElement, options?: DefaultOptions) => Promise<void>`
* **Kind:** `async`

Shows a details element, should be added on `summary` or anywhere inside the `details` element.

### closeDetails

* **Type:** `(selector:  HTMLInputElement | HTMLElement, options?: DefaultOptions) => Promise<void>`
* **Kind:** `async`

Closes a details element, should be added on `summary` or anywhere inside the `details` element.

---

---
url: /docs/components/dialog.md
---
# Dialog

Modal component that uses native HTML5 `dialog` functionality.

## Usage

::: code-group

```css
@import "winduum/src/components/dialog/index.css" layer(utilities);
```

```js
import { showDialog } from 'winduum/src/components/dialog'

document.querySelector('#showDialog').addEventListener('click', () => {
    showDialog(document.querySelector('dialog'))
})
```

```vue
<script setup>
    import { ref } from 'vue'
    import { Dialog, DialogContent } from '@/components/dialog'
    import { Heading } from '@/components/heading'
    import { Button } from '@/components/button'

    const dialogMain = ref()
</script>

<template>
    <UiBtn @click="dialogMain.show()">Open Dialog</UiBtn>
    <Dialog ref="dialogMain">
        <DialogContent>
            <Heading>Hello there!</Heading>
            <Button variant="muted" class="accent-main" @click="dialogMain.close()">
                Close me!
            </Button>
        </DialogContent>
    </Dialog>
</template>
```

:::

### Variants

### Props

### Installation

Follow instructions for individual framework usage below

## Example

::: code-group

```html
<button class="x-button" id="showDialog">Show dialog</button>

<dialog class="x-dialog">
    <form class="x-dialog-content" method="dialog">
        <div class="x-heading">Example dialog</div>
        <br>
        <div class="x-text">
            <p>You can close this dialog with Esc, clicking outside, or by form submit</p>
        </div>
        <br>
        <button class="x-button">Close dialog</button>
    </form>
</dialog>

<script type="module">
    import { showDialog } from 'winduum/src/components/dialog'

    document.querySelector('#showDialog').addEventListener('click', () => {
        showDialog(document.querySelector('dialog'))
    })
</script>
```

```vue
<script setup>
    import { ref } from 'vue'
    import { Dialog, DialogContent } from '@/components/dialog'
    import { Heading } from '@/components/heading'
    import { Button } from '@/components/btn'

    const dialogMain = ref()
</script>

<template>
    <UiBtn @click="dialogMain.show()">Open Dialog</UiBtn>
    <Dialog ref="dialogMain">
        <DialogContent>
            <Heading>Hello there!</Heading>
            <Button variant="muted" class="accent-main" @click="dialogMain.close()">
                Close me!
            </Button>
        </DialogContent>
    </Dialog>
</template>

```

:::

## JavaScript API

### `showDialog`

* **Type:** `(selector:  HTMLDialogElement, options?: DefaultOptions) => Promise<void>`
* **Kind:** `async`

Shows an existing `<dialog>`. It takes a `selector` argument, which is a CSS selector that identifies the dialog DOM element to be displayed. It also takes an options argument, which is an object that specifies how the dialog should be displayed.

The `closeDialog` event is sent upon closing with the `esc` key or clicking outside the dialog content window.

#### Example

```js
import { showDialog } from 'winduum/src/libraries/dialog'

document.querySelector('#showDialog').addEventListener('click', async () => {
    await showDialog(document.querySelector('#dialogElement'))
})
```

#### `DefaultOptions`

***

##### remove

* **Type:** `boolean`
* **Default:** `true`

A boolean that indicates whether the dialog should be removed from the DOM when it is closed.

***

##### closable

* **Type:** `boolean`
* **Default:** `true`

A boolean that indicates whenever is dialog closable by clicking outside or with `esc` key.

***

##### modal

* **Type:** `boolean`
* **Default:** `true`

Determines if the dialog is shown as modal on top-layer.

***

##### openAttribute

* **Type:** `string`
* **Default:** `data-open`

A string representing a data attribute that will be added when the dialog is fully visible.

***

##### closedAttribute

* **Type:** `string`
* **Default:** `data-closed`

A string representing a data attribute that will be added once the dialog starts closing.

***

##### contentSelector

* **Type:** `string`
* **Default:** `.x-dialog-content`

A string representing a CSS selector representing the dialog content

***

##### scrollbarWidthProperty

* **Type:** `string`
* **Default:** `--default-scrollbar-width`

A CSS property representing a scrollbar width, when dialog is shown the document scrollbar is hidden, this adds necessary padding.

***

### `closeDialog`

* **Type:** `(selector:  HTMLDialogElement, options?: DefaultOptions) => Promise<void>`
* **Kind:** `async`

Closes an existing `<dialog>`.
It takes a `selector` argument, which is a CSS selector that identifies the dialog DOM element.
It also takes an `options` argument, which is an object that specifies how the dialog should be closed.

When dialog closes it sends native `close` event you can listen to,
additionally `x-dialog:close` event is sent when dialog animation starts.

#### Example

```js
import { closeDialog } from 'winduum/src/components/dialog'

document.querySelector('#closeDialog').addEventListener('click', async () => {
    await closeDialog(document.querySelector('#dialogElement'))
})
```

---

---
url: /docs/utilities/divide-gap.md
---
# Divide Gap

Provides a new TailwindCSS utility classes `divide-gap-x` and `divide-gap-y` for easier way to do gap between [Divide](https://tailwindcss.com/docs/divide-width) utility classes. You can use all values from [Spacing scale](https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale).

## TailwindCSS v4

Include CSS file with the `@utility` at-rule.

```css
@import "winduum/tailwindcss/utilities/divide-gap.css";
```

## TailwindCSS v3

Add plugin via the `tailwind.config.js`, see [Config](/docs/base/config#tailwind-css-v3) for more info.

## Example

```html
<div class="flex divide-x divide-bg-primary divide-gap-x-4">
    <div>01</div>
    <div>02</div>
    <div>03</div>
</div>
```

---

---
url: /docs/utilities/dot.md
---
# Divide Gap

Provides a new utility class `dot` for.. well dots!

## Example

```html
<div class="dot"></div>
<div class="dot bg-main"></div>
<div class="dot bg-error"></div>
<div class="dot bg-warning"></div>
```

---

---
url: /docs/utilities/divider.md
---
# Divider

Provides a new utility class `divider` so you can easily separate content.

## Examples

### Basic

```html
<div class="flex flex-col gap-4">
    <div class="flex items-center gap-2">
        <button class="x-button accent-main flex-grow">Register</button>
        <button class="x-button flex-grow">Login</button>
    </div>
    <div class="divider">OR</div>
    <div class="flex items-center gap-2">
        <button class="x-button muted flex-grow">Facebook</button>
        <button class="x-button muted flex-grow">Google</button>
        <button class="x-button muted flex-grow">Apple</button>
    </div>
</div>
```

### Vertical

```html
<div class="flex gap-4">
    <div class="flex flex-col gap-2">
        <button class="x-button accent-main flex-grow">Register</button>
        <button class="x-button flex-grow">Login</button>
    </div>
    <div class="divider divider-vertical flex flex-col">OR</div>
    <div class="flex flex-col gap-2">
        <button class="x-button muted flex-grow">Facebook</button>
        <button class="x-button muted flex-grow">Google</button>
        <button class="x-button muted flex-grow">Apple</button>
    </div>
</div>
```

### Custom

```html
<div class="flex flex-col gap-4">
    <div class="flex items-center gap-2">
        <button class="x-button accent-main flex-grow">Register</button>
        <button class="x-button flex-grow">Login</button>
    </div>
    <div class="divider before:hidden after:border-dashed after:border-accent accent-primary">OR</div>
    <div class="flex items-center gap-2">
        <button class="x-button muted flex-grow">Facebook</button>
        <button class="x-button muted flex-grow">Google</button>
        <button class="x-button muted flex-grow">Apple</button>
    </div>
</div>
```

---

---
url: /docs/components/drawer.md
---
# Drawer

Provides a scroll drawer that uses native HTML5 `dialog` and CSS `scroll-snap` property.
Can be dismissed with touch gestures on touch devices.

### Usage

::: code-group

```css
@import "winduum/src/components/drawer/index.css" layer(utilities);
```

```liquid \[js]
<script type="module">
    import { showDrawer, closeDrawer, scrollDrawer, scrollInitDrawer } from "winduum/src/components/drawer"

    drawerLeftElement.addEventListener('scroll', ({ target }) => scrollDrawer(target))

    showDrawerLeftElement.addEventListener('click', async () => {
        drawerLeftElement.showModal()

        await scrollInitDrawer(drawerLeftElement)

        showDrawer(drawerLeftElement)
    })

    closeDrawerLeftElement.addEventListener('click', () => {
        closeDrawer(drawerLeftElement, drawerLeftElement.scrollWidth)
    })
</script>
```

### Variants

### Props

### Installation

Follow instructions for individual framework usage below

## Examples

### Left

```liquid \[js]
<script type="module">
    import { showDrawer, closeDrawer, scrollDrawer, scrollInitDrawer } from "winduum/src/components/drawer"

    drawerLeftElement.addEventListener('scroll', ({ target }) => scrollDrawer(target))

    showDrawerLeftElement.addEventListener('click', async () => {
        drawerLeftElement.showModal()

        await scrollInitDrawer(drawerLeftElement)

        showDrawer(drawerLeftElement)
    })

    closeDrawerLeftElement.addEventListener('click', () => {
        closeDrawer(drawerLeftElement, drawerLeftElement.scrollWidth)
    })
</script>
```

### Right

```liquid \[js]
<script type="module">
    import { showDrawer, closeDrawer, scrollDrawer, scrollInitDrawer } from "winduum/src/components/drawer"

    drawerRightElement.addEventListener('scroll', ({ target }) => scrollDrawer(target, {
        scrollOpen: target.scrollWidth - target.clientWidth,
        scrollClose: 0,
        opacityRatio: 0
    }))
    showDrawerRightElement.addEventListener('click', async () => {
        drawerRightElement.showModal()

        await scrollInitDrawer(drawerRightElement, 0)

        showDrawer(drawerRightElement, drawerRightElement.scrollWidth)
    })
    closeDrawerRightElement.addEventListener('click', () => closeDrawer(drawerRightElement, 0))
</script>
```

### Bottom

```liquid \[js]
<script type="module">
    import { showDrawer, closeDrawer, scrollDrawer, scrollInitDrawer } from "winduum/src/components/drawer"


    drawerBottomElement.addEventListener('scroll', ({ target }) => scrollDrawer(target, {
        snapClass: 'snap-y snap-mandatory',
        scrollSize: target.scrollHeight - target.clientHeight,
        scrollDirection: target.scrollTop,
        scrollOpen: target.scrollHeight - target.clientHeight,
        scrollClose: 0,
        opacityRatio: 0
    }))
    showDrawerBottomElement.addEventListener('click', async () => {
        drawerBottomElement.showModal()

        await scrollInitDrawer(drawerBottomElement, 0, 'top')

        showDrawer(drawerBottomElement, drawerBottomElement.scrollHeight, 'top')
    })
    closeDrawerBottomElement.addEventListener('click', () => closeDrawer(drawerBottomElement, 0, 'top'))
</script>
```

### Top

```liquid \[js]
<script type="module">
    import { showDrawer, closeDrawer, scrollDrawer, scrollInitDrawer } from "winduum/src/components/drawer"

    drawerTopElement.addEventListener('scroll', ({ target }) => scrollDrawer(target, {
        snapClass: 'snap-y snap-mandatory',
        scrollSize: target.scrollHeight - target.clientHeight,
        scrollDirection: target.scrollTop,
        scrollOpen: 0,
        scrollClose: target.scrollHeight - target.clientHeight
    }))
    showDrawerTopElement.addEventListener('click', async () => {
        drawerTopElement.showModal()

        await scrollInitDrawer(drawerTopElement,  drawerTopElement?.scrollHeight, 'top')

        showDrawer(drawerTopElement, 0, 'top')
    })
    closeDrawerTopElement.addEventListener('click', () => closeDrawer(drawerTopElement, drawerTopElement.scrollHeight, 'top'))
</script>
```

## Javascript API

### `showDrawer`

* **Type:** `(element: HTMLElement | Element, distance: number, direction: 'left' | 'top') => void`
* **Kind:** `sync`

Scroll the drawer to open state.

### `closeDrawer`

* **Type:** `(element: HTMLElement | Element, distance: number, direction: 'left' | 'top') => void`
* **Kind:** `sync`

Scroll the drawer to closed state.

### `scrollInitDrawer`

* **Type:** `(element: HTMLElement | Element, distance?: number, direction?: 'left' | 'top') => void`
* **Kind:** `sync`

Initializes the scroll position. Call this before `showDrawer` method.

### `scrollDrawer`

* **Type:** `(element: HTMLElement | Element, options: ScrollDrawerOptions) => void`
* **Kind:** `sync`

Sets correct classes and attributes upon scroll. Events `c-drawer:open` and `c-drawer:close` are dispatched upon opening or closing the drawer.

#### ScrollDrawerOptions

***

##### snapClass

* **Type:** `string`
* **Default:** `snap-x snap-mandatory`

A classes that are added for snapping purposes once the drawer is open.

***

##### opacityProperty

* **Type:** `string`
* **Default:** `--tw-bg-opacity`

A CSS property for animating the background opacity upon scroll.

***

##### opacityRatio

* **Type:** `number`
* **Default:** `1`

You can either set `1` or `0` depending on the direction the drawer is opened. Right and bottom drawer should be set to `0`.

***

##### scrollOpen

* **Type:** `number`
* **Default:** `0`

Scroll position indicating that the drawer is opened.

***

##### scrollClose

* **Type:** `number`
* **Default:** `element.scrollWidth - element.clientWidth`

Scroll position indicating that the drawer is closed.

***

##### scrollSize

* **Type:** `number`
* **Default:** `element.scrollWidth - element.clientWidth`

Maximum scroll size of the drawer.

***

##### scrollDirection

* **Type:** `number`
* **Default:** `element.scrollLeft`

Current scroll position of the drawer.

---

---
url: /docs/components/field.md
---
# Field

Component used to group a form components.

### Variants

### Installation

Follow instructions for individual framework usage below

### Usage

```css
@import "winduum/src/components/field/index.css" layer(utilities);
```

## Examples

### Basic

```html
<div class="x-field">
    <label class="x-label">Label</label>
    <div class="x-control">
        <input type="text" required>
    </div>
    <em class="x-info">Info message</em>
</div>
```

---

---
url: /docs/components/form.md
---
# Form

Provides a basic way to validate your form and show feedback to your users with native HTML5 form validation. Use attributes such as [pattern](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern) to add other validation rules.

`novalidate` must be present on `form` to handle validation with JavaScript.

::: info
Compatible with any reactive framework, but updates will not propagate to the virtual DOM.
For advance form of validation use [VeeValidate](https://vee-validate.logaretm.com/v4/), [React Hook Form](https://react-hook-form.com/) or others.
:::

### Installation

Follow instructions for individual framework usage below

### Usage

```liquid \[js]
<script type="module">
    import { validateForm } from 'winduum/src/components/form'

    document.querySelector('form').addEventListener('submit', event => {
        validateForm(event)
    })
</script>
```

## Examples

### Form

```liquid \[js]
<script type="module">
    import { validateForm } from 'winduum/src/components/form'

    document.querySelector('form').addEventListener('submit', event => {
        validateForm(event)
    })
</script>
```

### Field

```liquid \[js]
<script type="module">
    import { validateField } from 'winduum/src/components/form'

    document.querySelector('.x-control').addEventListener('input', ({ currentTarget }) => {
        validateField(currentTarget)
    })
</script>
```

## Javascript API

### `validateForm`

* **Type:** `(event: Event | SubmitEvent, options?: ValidateFormOptions) => void`
* **Kind:** `sync`

Validates a form with [checkValidity](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity) and [validateField](/docs/components/form#validatefield) events.

#### ValidateFormOptions

***

##### validateSelectors

* **Type:** `string`
* **Default:** `.x-control, .x-check, .x-switch, .x-rating, .x-color`

Selectors which will be validated.

***

##### validateOptions

* **Type:** `ValidateFieldOptions`
* **Default:** `{}`

Additional options for `validateField`

***

##### submitterLoadingAttribute

* **Type:** `string`
* **Default:** `data-loading`

Loading class that will be added to a submitter element, e.g., A button.

***

##### scrollOptions

* **Type:** `ScrollIntoViewOptions`
* **Default:** `{ behavior: 'smooth', block: 'center' }`

Scroll options when scrolling to an invalid element.

### `validateField`

* **Type:** `(selector:  HTMLElement, options?: ValidateFieldOptions) => void`
* **Kind:** `sync`

Validates a field. This can be element such as `.x-control`, `x-check` and others that can be validated. It adds validation info message inside `c-field` and validation icon inside `x-control`.
It also adds a `valid`, `invalid` or `active` class to the element.

#### ValidateFieldOptions

***

##### validate

* **Type:** `boolean`
* **Default:** `true`

Only `active` class is added if the element value is not empty. No other validation is done.

***

##### selector

* **Type:** `string`
* **Default:** `input:not([type="hidden"]), textarea, select`

***

##### ignoreMatch

* **Type:** `RegExp`
* **Default:** `/(data-novalidate|readonly)/`

Ignores a validation if any of these strings are present in the HTML.

***

##### validitySelector

* **Type:** `string`
* **Default:** `.validity`

Selector for dynamically added content in the DOM such us info message or icon.

***

##### infoParentSelector

* **Type:** `string`
* **Default:** `.x-field`

***

##### infoSelector

* **Type:** `string`
* **Default:** `.x-info`

***

##### infoContent

* **Type:** `string`
* **Default:** `<div class="x-info text-error validity"></div>`

***

##### endParentSelector

* **Type:** `string`
* **Default:** `.x-control`

***

##### endSelector

* **Type:** `string`
* **Default:** `.ms-auto`

***

##### endContent

* **Type:** `string`
* **Default:** `<div class="ms-auto"></div>`

***

##### validAttribute

* **Type:** `string`
* **Default:** `data-valid`

***

##### validIcon

* **Type:** `string | null`
* **Default:** `null`

***

##### invalidAttribute

* **Type:** `string`
* **Default:** `data-invalid`

***

##### invalidIcon

* **Type:** `string`
* **Default:** `<svg class="text-error validity" aria-hidden="true"><use href="#icon-exclamation-circle"></use></svg>`

***

##### activeAttribute

* **Type:** `string`
* **Default:** `data-active`

---

---
url: /docs/grid.md
---
# Grid

It's recommended to use the following TailwindCSS approaches to shape your layout

* [Grid](https://tailwindcss.com/docs/grid-template-columns)
* [Flex](https://tailwindcss.com/docs/flex)
* [Gap](https://tailwindcss.com/docs/gap)

Winduum also provides additional utilities to make things even easier.

* [Container](/docs/utilities/container)
* [Divide Gap](/docs/utilities/divide-gap)

---

---
url: /docs/components/group.md
---
# Group

Group common ui components such as [Button](/docs/components/button), [Badge](/docs/components/badge) or [Control](/docs/components/control) together.

### Usage

```css
@import "winduum/src/components/group/index.css" layer(utilities);
```

### Variants

### Tokens

### Installation

Follow instructions for individual framework usage below

## Examples

### Button Group

```html \[html]
<div class="x-group">
    <button class="x-button">Button</button>
    <button class="x-button">Button</button>
    <button class="x-button">Button</button>
</div>
<div class="x-group">
    <button class="x-button outline">Button</button>
    <button class="x-button outline">Button</button>
    <button class="x-button outline">Button</button>
</div>
<div class="x-group">
    <button class="x-button muted">Button</button>
    <button class="x-button muted">Button</button>
    <button class="x-button muted">Button</button>
</div>
```

```vue
<script setup lang="ts">
    import { Group } from '@/components/group'
    import { Button } from '@/components/button'
</script>

<template>
    <Group>
        <Button>Button</Button>
        <Button>Button</Button>
        <Button>Button</Button>
    </Group>
</template>
```

```jsx
import { Group } from '@/components/group'
import { Button } from '@/components/button'

export function Example() {
    return (
        <>
            <Group>
                <Button>Button</Button>
                <Button>Button</Button>
                <Button>Button</Button>
            </Group>
        </>
    )
}
```

:::

### Badge Group

```html
<div class="x-group">
    <div class="x-badge">Badge</div>
    <div class="x-badge">Badge</div>
    <div class="x-badge">Badge</div>
</div>
<div class="x-group">
    <div class="x-badge bordered">Badge</div>
    <div class="x-badge bordered">Badge</div>
    <div class="x-badge bordered">Badge</div>
</div>
<div class="x-group">
    <div class="x-badge muted">Badge</div>
    <div class="x-badge muted">Badge</div>
    <div class="x-badge muted">Badge</div>
</div>
<div class="x-group">
    <div class="x-badge bg-gray-200 text-dark">
        <span>npm</span>
    </div>
    <div class="x-badge bg-info">
        <span>7.1.2</span>
    </div>
</div>
```

### Control Group

```html
<div class="x-group">
    <div class="x-control bg-body-secondary w-(--x-control-block-size) flex items-center justify-center">
        @
    </div>
    <div class="x-control">
        <input type="tel" required>
    </div>
    <button class="x-button">Button</button>
</div>
```

### Vertical Group

```html
<div class="x-group vertical">
    <a role="button" class="x-button">Link</a>
    <button type="submit" class="x-button">Button</button>
    <input type="button" value="Input" class="x-button" />
    <input type="submit" value="Submit" class="x-button" />
    <input type="radio" aria-label="Radio" class="x-button" />
    <input type="checkbox" aria-label="Checkbox" class="x-button" />
    <input type="reset" value="Reset" class="x-button" />
</div>
```

```html
<div class="x-group vertical">
    <div class="x-control">
        <input type="text" placeholder="1234 1234 1234 1234" required>
    </div>
    <div class="x-group">
        <div class="x-control">
            <input type="text" placeholder="MM/YY" required>
        </div>
        <div class="x-control">
            <input type="text" placeholder="CVC" required>
        </div>
    </div>
</div>
```

---

---
url: /docs/components/heading.md
---
# Heading

For common heading styles that you can manage from one component across project.

### Usage

```css
@import "winduum/src/components/heading/index.css" layer(utilities);
```

### Tokens

* `sm`&#x20;
* `lg`&#x20;

### Installation

Follow instructions for individual framework usage below

## Examples

### Basic

```html \[html]
<div class="x-heading">Heading</div>
```

```vue
<script setup lang="ts">
    import { Heading } from '@/components/heading'
</script>

<template>
    <Heading>Heading</Heading>
</template>
```

```jsx
import { Heading } from '@/components/heading'

export function Example() {
    return (
        <Heading>Heading</Heading>
    )
}
```

:::

### Small

```html
<h3 class="x-heading sm">Heading H3</h3>
```

### Large

```html
<h3 class="x-heading lg">Heading H1</h3>
```

### Weight

```html
<h3 class="x-heading font-normal">Heading H1</h3>
```

---

---
url: /docs/icons.md
---
# Icons

It's recommended to use icons as svg, such as [Heroicons](https://heroicons.com/)

Winduum uses some of them internally via CSS custom properties.

```css
:root {
    --x-check-icon-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>');
    --x-check-radio-icon-mask: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 160c-53.019 0-96 42.981-96 96v0c0 53.019 42.981 96 96 96v0c53.019 0 96-42.981 96-96v0c0-53.019-42.981-96-96-96z"></path></svg>');
}

/* Example */
.icon-check {
    background-color: currentColor;
    mask: var(--x-check-icon-mask);
    width: 1rem;
    height: 1rem;
}
```

You can also use your svg icons via `<use href="#">` method.
Define a global `<svg hidden>` with various icons as `<symbol>`

```html
<svg class="hidden">
    <symbol id="icon-academic-cap" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5" />
    </symbol>
</svg>

<!-- elsewhere in component use following !-->
<svg class="size-6">
    <use href="#icon-academic-cap"></use>
</svg>
```

You can also use [Vue](https://github.com/tailwindlabs/heroicons#vue) and [React](https://github.com/tailwindlabs/heroicons#react) libraries for **Heroicons**

---

---
url: /docs/components/image.md
---
# Image

Default constrains for media elements such as `img`, `video`, `iframe`, `object` or `svg`

### Usage

```css
@import "winduum/src/components/image/index.css" layer(utilities);
```

### Variants

### Tokens

### Installation

Follow instructions for individual framework usage below

## Examples

### Ratio

```html \[html]
<div class="x-image">
    <img class="aspect-[3/2]" src="https://img.logoipsum.com/250.svg" loading="lazy" alt="">
</div>
```

```vue
<script setup lang="ts">
    import { UiImage } from '@/components/image'
</script>

<template>
    <UiImage>
        <img class="aspect-[3/2]" src="https://img.logoipsum.com/250.svg" loading="lazy" alt="">
    </UiImage>
</template>
```

```jsx
import { UiImage } from '@/components/image'

export function Example() {
    return (
        <UiImage>
            <img className="aspect-[3/2]" src="https://img.logoipsum.com/250.svg" loading="lazy" alt="" />
        </UiImage>
    )
}
```

:::

### Rounded

```html
<div class="x-image rounded">
    <img class="aspect-square" src="https://picsum.photos/seed/picsum/200/200" loading="lazy" alt="">
</div>
```

### Avatar

```html
<div class="x-image avatar size-32">
    <span>LB</span>
</div>
```

### Skeleton

```html
<div class="x-image before:skeleton">
    <img class="aspect-[3/2]" src="https://picsum.photos/seed/picsum/300/200" loading="lazy" alt="">
</div>
```

### Iframe

```html
<div class="x-image">
    <iframe class="aspect-square" loading="lazy" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10243.539317839937!2d14.3677486!3d50.0697185!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x66f5877a189baf0d!2sTvorba+webov%C3%BDch+str%C3%A1nek+-+New+Logic+Studio!5e0!3m2!1sen!2scz!4v1547215701439" width="600" height="450" frameborder="0" style="border:0" allowfullscreen=""></iframe>
</div>
```

---

---
url: /docs/components/info.md
---
# Info

Small informative component.

### Usage

```css
@import "winduum/src/components/info/index.css" layer(utilities);
```

### Variants

### Props

### Installation

Follow instructions for individual framework usage below

## Examples

### Basic

```html \[html]
<em class="x-info">Info text</em>
```

```vue
<script setup lang="ts">
    import { Info } from '@/components/info'
</script>

<template>
    <Info>Info text</Info>
</template>
```

```jsx
import { Info } from '@/components/info'

export function Example() {
    return (
        <Info>Info text</Info>
    )
}
```

:::

---

---
url: /docs.md
---
# Install

You can use Winduum with or without [TailwindCSS](https://tailwindcss.com/).
Check out the [About](/docs/about) page to learn more about Winduum and its philosophy.

Winduum `2.x` is using compatible naming for CSS custom properties that work with both current and old versions of TailwindCSS,
specifically `v4` and `v3`.

## Get started

You can install Winduum via **npm** and use it in your **Node.js** project.
Or copy and paste the components from source and make it your own.

You can also mix both approaches, everything is possible!

See [Trying Winduum Online](#trying-winduum-online) section below to see all possible examples of use.

### npm

```shell
npm i winduum
```

The components are written in plain CSS, so sources can be also loaded in browsers without a build step or used in any other build tool such as **PostCSS** or **LightningCSS**.

```css
@import "winduum/src/theme/index.css" layer(theme);
@import "winduum/src/base/index.css" layer(base);
@import "winduum/src/components/index.css" layer(utilities);
@import "winduum/src/utilities/index.css" layer(utilities);
```

Or you can include components separately, follow usage steps with each component.

```css
@import "winduum/src/theme/index.css" layer(theme);
@import "winduum/src/base/index.css" layer(base);
@import "winduum/src/components/button/index.css" layer(utilities);
@import "winduum/src/utilities/index.css" layer(utilities);
```

Or paste the source code to your project and make it your own!

```css
@import "@/styles/theme/index.css" layer(theme);
@import "@/styles/base/index.css" layer(base);
@import "@/styles/components/button/index.css" layer(utilities);
@import "@/styles/utilities/index.css" layer(utilities);
```

With `layer(utilities)` you can use TailwindCSS variant classes, for example `class="x-button lg:square"` to make button square only from `lg` breakpoint. (Not wokring with TailwindCSS v4 currently)

### TailwindCSS

It's optional but recommended to leverage the full functionality of the library!

#### v4

To use TailwindCSS `v4`, you will have to import TailwindCSS and Winduum imports individually.

```css
@import "tailwindcss/theme.css" layer(theme);
@import "winduum/tailwindcss/theme/config/index.css" layer(theme);
@import "winduum/tailwindcss/theme/default.css" layer(theme);
@import "winduum/src/theme/dark.css" layer(theme);
@import "winduum/src/base/reset.css" layer(base);
@import "winduum/src/base/defaults.css" layer(base);

/* single imports for your components and utilities, or you can include them separately in your project (recommended) */
@import "winduum/src/components/index.css" layer(utilities);
@import "winduum/src/utilities/container/props/default.css" layer(theme);
@import "winduum/src/utilities/ripple/keyframes/default.css";
@import "winduum/src/utilities/skeleton/props/default.css" layer(theme);
@import "winduum/src/utilities/spinner/keyframes/ring.css";

@import "winduum/tailwindcss/utilities/index.css";
@import "tailwindcss/utilities" layer(utilities);
@import "winduum/tailwindcss/variants/index.css";
@import "winduum/src/base/breakpoints.css";
@import "winduum/src/base/keyframes.css";
@import "winduum/src/base/transitions.css";
```

TailwindCSS `v4` can be used in any project with Vite and works out of the box.
No `tailwind.config.js` needed!
All configuration is done in CSS!

```javascript
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tailwindcss()],
})
```

#### v3

To use TailwindCSS `v3`, you will have to import TailwindCSS and Winduum imports individually.

```css
@import "winduum/src/theme/index.css";
@import "winduum/src/base/index.css";
@import "winduum/src/components/index.css" layer(utilities);
@import "winduum/src/utilities/index.css" layer(utilities);
@import "winduum/tailwindcss/base/defaults.css";
@import "tailwindcss/base.css";
@import "tailwindcss/components.css";
@import "tailwindcss/utilities.css";
@import "tailwindcss/variants.css";
```

Follow the installation steps in [TailwindCSS](https://v3.tailwindcss.com/docs/installation) docs
and include Winduum as a plugin,
see [Config](/docs/base/config#tailwind-css-v3) for more info.

## PostCSS or LightingCSS

For TailwindCSS `v3` following PostCSS plugins are required.
If you are using `v4` the [LightingCSS](https://lightningcss.dev/) is used out of the box.

* [`autoprefixer`](https://www.npmjs.com/package/autoprefixer)
* [`tailwindcss`](https://www.npmjs.com/package/tailwindcss)
* [`postcss-nesting`](https://www.npmjs.com/package/postcss-nesting)
* [`postcss-import`](https://www.npmjs.com/package/postcss-import)
* [`postcss-custom-media`](https://www.npmjs.com/package/postcss-custom-media)

If you are not using TailwindCSS, you can use whatever you want, even no build step!

## Stylelint

It's also recommended
to use [Stylelint](https://stylelint.io/) with [stylelint-stylistic](https://github.com/stylelint-stylistic/stylelint-stylistic)
to help add conventions to your styles.
You can check
and use basic `.stylelintrc` for Winduum [here](https://github.com/winduum/winduum/blob/main/.stylelintrc).

```shell
npm i stylelint stylelint-config-standard @stylistic/stylelint-config --save-dev
```

## CSS Pre-processors

If you want to use pre-processors like `sass` or `less` you can.
But if you want to use [TailwindCSS](#tailwindcss) be sure
to follow a guide how to use it with [Preprocessors](https://tailwindcss.com/docs/using-with-preprocessors)

## CDN

This is meant only for basic usage. Only basic styles are included for TailwindCSS, such as colors and font variants.

To leverage the full functionality of the framework, [TailwindCSS](#tailwindcss) and build step is recommended.

```html
<link href="https://cdn.jsdelivr.net/npm/winduum/dist/main.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/winduum/dist/tailwind.css" rel="stylesheet">
<!--or-->
<link href="https://cdn.jsdelivr.net/npm/winduum/src/base/index.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/winduum/src/components/button/index.css" rel="stylesheet">

```

## Trying Winduum Online

On [StackBlitz](https://stackblitz.com/) or [GitHub](https://github.com/winduum/winduum/tree/main/examples) with basic examples how to use it in [Vite](https://vitejs.dev/) and other frameworks.

* vite&#x20;
* vite + vue&#x20;
* vite + react&#x20;
* vite + svelte&#x20;
* vite + solid&#x20;
* vite + qwik&#x20;
* vite + lit&#x20;

- astro&#x20;
- nuxt&#x20;
- next&#x20;
- htmx&#x20;
- vite + sass&#x20;
- vite + less&#x20;

Winduum is **framework-agnostic**, learn more on the [About](/docs/about#framework-agnostic) page.

Do you need ready to use components? Here are components ready to copy & paste. For now there are only a few, more might come in the future!

Each component in docs includes example usage in `html` and also in `vue` and `jsx`.

---

---
url: /docs/base/keyframes.md
---
# Keyframes

Following keyframes are provided in [`src/base/keyframes.css`](https://github.com/winduum/winduum/blob/main/src/base/keyframes.css).

```css
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fade-in {
  from {
    opacity: 0%;
  }
}

@keyframes fade-out {
  to {
    opacity: 0%;
  }
}

```

---

---
url: /docs/components/label.md
---
# Label

### Usage

```css
@import "winduum/src/components/label/index.css" layer(utilities);
```

### Variants

### Props

### Installation

Follow instructions for individual framework usage below

## Examples

### Basic

```html \[html]
<div class="x-field">
    <label class="x-label" for="input">Label</label>
    <div class="x-control">
        <input type="text" id="input">
    </div>
</div>
```

```vue
<script setup lang="ts">
    import { Label } from '@/components/label'
</script>

<template>
    <Label for="input">Label</Label>
</template>
```

```jsx
import { Label } from '@/components/label'

export function Example() {
    return (
        <Label for="input">Label</Label>
    )
}
```

:::

---

---
url: /docs/layers.md
---
# Layers

All component styles are written with low specificity in mind. This ensures that any utility classes have higher specificity.

You can also leverage [CSS Layers](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers) to have even better control of your specificity. This can be also combined with [TailwindCSS layers](https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer).

## TailwindCSS v4

Future version of TailwindCSS uses layers by default, so no configration is needed.

## TailwindCSS v3

If you want to write CSS [per-component](https://tailwindcss.com/docs/adding-custom-styles#layers-and-per-component-css), be aware that here you cannot use TailwindCSS layers. Well you could, but it would have some unfortunate side effects of utility classes leaking into components. You can use layers globally like this.

```css
@layer winduum-base, winduum-components, winduum-utilities, winduum-variants;

@import "winduum/src/base/index.css" layer(base);
@import "winduum/src/components/index.css" layer(utilities);
@import "winduum/src/components/index.css" layer(utilities);
@import "winduum/src/utilities/index.css" layer(utilities);

@layer winduum-base {
  @tailwind base;
}

@layer winduum-components {
  @tailwind components;
}

@layer winduum-utilities {
  @tailwind utilities;
}

@layer winduum-variants {
  @tailwind variants;
}
```

---

---
url: /docs/components/link.md
---
# Link

### Usage

```css
@import "winduum/src/components/link/index.css" layer(utilities);
```

### Variants

### Props

### Installation

Follow instructions for individual framework usage below

## Examples

### Basic

```html \[html]
<a href="#" class="x-link" title="">
    Link Default
</a>
<a href="#" class="x-link accent-success" title="">
    Link Accent
</a>
```

```vue
<script setup lang="ts">
    import { Link } from '@/components/link'
</script>

<template>
    <Link href="#" title="">
        Link Default
    </Link>
    <Link href="#" class="accent-primary" title="">
        Link Primary
    </Link>
</template>
```

```jsx
import { Link } from '@/components/link'

export function Example() {
    return (
        <>
            <Link href="#" title="">
                Link Default
            </Link>
            <Link href="#" className="accent-primary" title="">
                Link Primary
            </Link>
        </>
    )
}
```

:::

### Underline

```html
<a href="#" class="x-link underline" title="">
    Link Default
</a>
<a href="#" class="x-link text-primary underline underline-transparent" title="">
    Link Primary
</a>
```

---

---
url: /docs/components/notice.md
---
# Notice

### Usage

```css
@import "winduum/src/components/notice/index.css" layer(utilities);
```

### Variants

### Props

### Installation

Follow instructions for individual framework usage below

## Examples

### Success

```html \[html]
<div class="x-notice accent-success" role="alert">
    Success notice
</div>
```

```vue
<script setup lang="ts">
    import { Notice } from '@/components/notice'
</script>

<template>
    <Notice class="accent-success">
        Success notice
    </Notice>
</template>
```

```jsx
import { Notice } from '@/components/notice'

export function Example() {
    return (
        <Notice className="accent-success">
            Success notice
        </Notice>
    )
}
```

:::

### Error

```html
<div class="x-notice accent-error" role="alert">
    Error notice
</div>
```

### Warning

```html
<div class="x-notice accent-warning" role="alert">
    Warning notice
</div>
```

### Info

```html
<div class="x-notice accent-info" role="alert">
    Info notice
</div>
```

### Text

```html
<div class="x-notice accent-error space-y-4" role="alert">
    <div class="x-text">
        <h4>Text notice</h4>
        <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nullam in elit iaculis, tristique nisi ut, mollis tellus. Nunc venenatis elit vel placerat commodo. Vestibulum odio neque, hendrerit nec venenatis at, tincidunt ut magna. Etiam hendrerit ultrices pharetra.</p>
    </div>
    <button class="x-button">
        <span>Button</span>
    </button>
</div>
```

### Background

```html
<div class="x-notice bg-error text-light text-center" role="alert">
    Error background notice
</div>
```

---

---
url: /docs/components/pagination.md
---
# Pagination

### Usage

```css
@import "winduum/src/components/pagination/index.css" layer(utilities);
```

### Variants

### Installation

Follow instructions for individual framework usage below

## Example

```html
<nav class="x-pagination" aria-label="pagination">
    <a class="x-button sm square muted pointer-events-none" href="#" aria-current="page">1</a>
    <a class="x-button sm square ghosted" href="#">2</a>
    <a class="x-button sm square ghosted" href="#">3</a>
    <a class="x-button sm square ghosted" href="#">4</a>
    <a class="x-button sm square ghosted">...</a>
    <a class="x-button sm square ghosted" href="#">30</a>
</nav>
```

---

---
url: /docs/components/popover.md
---
# Popover

Popover can be used for dropdowns and other popovers when an element is clicked and focused.
You have following types of trigger as an option:

* trigger on focus with CSS `trigger-focus` class
* trigger on hover with CSS `trigger-hover` class
* trigger on click with JS and the `[popover]` attribute

### Dependencies

* [floating-ui](https://floating-ui.com/) - for `[popover]` trigger

## Usage

::: code-group

```css
@import "winduum/src/components/popover/index.css" layer(utilities);
```

```html \[html]
<div class="x-popover trigger-focus">
    <div role="button" class="x-button" tabindex="0">Popover</div>
    <div class="x-popover-content center shadow dark:bg-body-secondary mt-2.5 p-2 w-32 flex flex-col" tabindex="0">
        <button class="x-button ghosted accent-main justify-start w-full">Item 1</button>
        <button class="x-button ghosted accent-main justify-start w-full">Item 2</button>
    </div>
</div>
```

```vue
<script setup>
    import { ref } from 'vue'
    import { Popover, PopoverContent } from '@/components/popover'
    import { Button } from '@/components/button'
</script>

<template>
    <Popover>
        <Button>Open Popover</Button>
        <PopoverContent>
            Popover content
        </PopoverContent>
    </Popover>
</template>
```

:::

### Variants

### Tokens

Applicable to `x-popover-content`

* `bottom bottom-start`
* `bottom bottom-end`
* `top top-start`
* `top top-end`
* `right right-start`
* `right right-end`
* `left left-start`
* `left left-end`
* `bottom inline-center`
* `top inline-center`
* `right block-center`
* `left block-center`

### Installation

Follow instructions for individual framework usage below

## Examples

### focus-trigger

```html
<div class="x-popover trigger-focus">
    <div role="button" class="x-button" tabindex="0">Popover</div>
    <div class="x-popover-content center shadow dark:bg-body-secondary mt-2.5 p-2 w-32 flex flex-col" tabindex="0">
        <button class="x-button ghosted accent-main justify-start w-full">Item 1</button>
        <button class="x-button ghosted accent-main justify-start w-full">Item 2</button>
    </div>
</div>
```

### hover-trigger

```html
<div class="x-popover trigger-hover">
    <div role="button" class="x-button" tabindex="0">Popover</div>
    <div class="x-popover-content center shadow dark:bg-body-secondary mt-2.5 p-2 w-32 flex flex-col">
        <button class="x-button ghosted accent-main justify-start w-full">Item 1</button>
        <button class="x-button ghosted accent-main justify-start w-full">Item 2</button>
    </div>
</div>
```

### \[popover]

This is using advantages of [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) with [floating-ui](https://floating-ui.com/).
It's also backwards compatible as it's leveraging only the `showPopover` and `hidePopover` for the [top-layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer) support.

Popover is placed dynamically upon available space, and auto updates itself when needed.

```html
<div class="x-popover w-full flex flex-col items-center">
    <button class="x-button" popovertargetaction="toggle" popovertarget="popover">Popover</button>
    <div class="x-popover-content shadow dark:bg-body-secondary p-2" id="popover" popover="manual">
        <input type="text" autofocus>
    </div>
</div>
```

## JavaScript API

### `showPopover`

* **Type:** `(element: HTMLElement | Element, options?: ShowPopoverOptions) => Promise<void>`
* **Kind:** `async`

#### Example

```js
import { showPopover, hidePopover } from '/src/components/popover'

const popoverActionElement = document?.querySelector('[popovertargetaction="show"]')

popoverActionElement?.addEventListener('click', async (e) => {
    e.preventDefault()
    
    const currentTarget = e.currentTarget
    await showPopover(currentTarget, {
        placement: 'right-end',
    })
})

// close on esc
window.addEventListener('keydown', ({ key }) => {
    if (key === 'Escape') {
        hidePopover(popoverActionElement)
    }
})

// outside dismiss
window.addEventListener('click', ({ target }) => {
    if (!window.popover?.contains(target) && !popoverActionElement?.isEqualNode(target) && popoverActionElement?.ariaExpanded === 'true') {
        hidePopover(popoverActionElement)
    }
})
```

#### `ShowPopoverOptions`

***

##### anchorSelector

* **Type:** `string`
* **Default:** `undefined`

By default, the anchor selector is the trigger button, you can change this to other selector.

***

##### openAttribute

* **Type:** `string`
* **Default:** `data-open`

A string representing an attribute that will be added when popover is visible.

***

##### compute

* **Type:** `boolean`
* **Default:** `true`

Determines if the popover should be anchored and computed with `@floating-ui/dom`

***

##### placement

* **Type:** `Placement`
* **Default:** `undefined`

Determines [placement](https://floating-ui.com/docs/computePosition#placement) of the popover with `@floating-ui/dom`, also adds a corresponding class to the popover target.

***

##### middleware

* **Type:** `Array<Middleware | null | undefined | false>`
* **Default:** `[offset(12 ?? options?.offset), flip(options?.flip), shift({ padding: 8, ...options?.shift })]`

Customize [middleware](https://floating-ui.com/docs/computePosition#middleware) for `@floating-ui/dom`

***

##### offset

* **Type:** `OffsetOptions`
* **Default:** `12`

Customize [offset](https://floating-ui.com/docs/offset#options) options for `@floating-ui/dom`

***

##### flip

* **Type:** `FlipOptions`
* **Default:** `undefined`

Customize [flip](https://floating-ui.com/docs/flip#options) options for `@floating-ui/dom`

***

##### shift

* **Type:** `ShiftOptions`
* **Default:** `undefined`

Customize [shift](https://floating-ui.com/docs/shift#options) options for `@floating-ui/dom`

***

### `hidePopover`

* **Type:** `(element: HTMLElement | Element) => Promise<void>`
* **Kind:** `async`

#### Example

```js
import { hidePopover } from '/src/components/popover'

const popoverActionElement = document?.querySelector('[popovertargetaction="hide"]')

popoverActionElement?.addEventListener('click', async (e) => {
    e.preventDefault()
    
    const currentTarget = e.currentTarget
    await hidePopover(currentTarget)
})
```

### `togglePopover`

* **Type:** `(element: HTMLElement | Element, options?: ShowPopoverOptions) => Promise<void>`
* **Kind:** `async`

#### Example

```js
import { togglePopover, hidePopover } from '/src/components/popover'

const popoverActionElement = document?.querySelector('[popovertargetaction="toggle"]')

popoverActionElement?.addEventListener('click', async (e) => {
    e.preventDefault()
    
    const currentTarget = e.currentTarget
    await togglePopover(currentTarget)
})

// close on esc
window.addEventListener('keydown', ({ key }) => {
    if (key === 'Escape') {
        hidePopover(popoverActionElement)
    }
})

// outside dismiss
window.addEventListener('click', ({ target }) => {
    if (!window.popover?.contains(target) && !popoverActionElement?.isEqualNode(target) && popoverActionElement?.ariaExpanded === 'true') {
        hidePopover(popoverActionElement)
    }
})
```

---

---
url: /docs/components/progress.md
---
# Progress

Displays progress with native HTML5 tags `progress` or `meter`

### Usage

```css
@import "winduum/src/components/progress/index.css" layer(utilities);
```

### Variants

### Props

### Tokens

* `sm`&#x20;
* `lg`&#x20;

### Installation

Follow instructions for individual framework usage below

## Examples

### Colors

```html \[html]
<progress class="x-progress accent-primary" value="25" max="100"></progress>
<progress class="x-progress accent-success" value="50" max="100"></progress>
<progress class="x-progress accent-error" value="75" max="100"></progress>
<progress class="x-progress accent-info" value="15" max="100"></progress>
<progress class="x-progress accent-warning" value="85" max="100"></progress>
```

```vue
<script setup lang="ts">
    import { UiProgress } from '@/components/progress'
</script>

<template>
    <UiProgress class="accent-primary" value="25" max="100"></UiProgress>
    <UiProgress class="accent-success" value="50" max="100"></UiProgress>
    <UiProgress class="accent-error" value="75" max="100"></UiProgress>
    <UiProgress class="accent-info" value="15" max="100"></UiProgress>
    <UiProgress class="accent-warning" value="85" max="100"></UiProgress>
</template>
```

```jsx
import { UiProgress } from '@/components/progress'

export function Example() {
    return (
        <>
            <UiProgress className="accent-primary" value="25" max="100"></UiProgress>
            <UiProgress className="accent-success" value="50" max="100"></UiProgress>
            <UiProgress className="accent-error" value="75" max="100"></UiProgress>
            <UiProgress className="accent-info" value="15" max="100"></UiProgress>
            <UiProgress className="accent-warning" value="85" max="100"></UiProgress>
        </>
    )
}
```

:::

### Small

```html
<progress class="x-progress sm" value="50" max="100"></progress>
```

### Large

```html
<progress class="x-progress lg" value="50" max="100"></progress>
```

### Indeterminate

```html
<progress class="x-progress" max="100"></progress>
```

### Meter

```html
<meter class="x-progress accent-main" value="50" min="0" max="100" low="33" optimum="80" high="66">25 out of 45</meter>
```

---

---
url: /docs/components/range.md
---
# Range

Accessible range slider that allows easy selection of a value by sliding a handle.

### Usage

::: code-group

```css
@import "winduum/src/components/range/index.css" layer(utilities);
```

```js
import { setValue } from 'winduum/src/components/range'

const rangeSlider = document.querySelector('#rangeSlider')

setValue(rangeSlider)
rangeSlider.addEventListener('input', ({ currentTarget }) => setValue(currentTarget))
```

:::

### Variants

* `default`&#x20;
* `multi`&#x20;

### Props

### Tokens

* `vertical`&#x20;

### Installation

Follow instructions for individual framework usage below

## Examples

### Default

```liquid \[js]
<script type="module">
    import { setValue, setOutputValue } from 'winduum/src/components/range/index.js'

    const rangeSingle = document.querySelector('#range-single')

    const setSingleValue = ({ currentTarget }) => {
        setValue(currentTarget)

        setOutputValue(currentTarget, document.querySelector('#single'))
    }

    setSingleValue({ currentTarget: rangeSingle })
    rangeSingle.addEventListener('input', setSingleValue)
</script>
```

```vue
<script setup lang="ts">
    import { Range } from '@/components/range'
</script>

<template>
    <Range>
        <input type="range" value="0" step="10" max="100" min="0" aria-labelledby="single" id="range-single">
    </Range>
</template>
```

```jsx
import { Range } from '@/components/range'

export function Example() {
    return (
        <Range>
            <input type="range" value="0" step="10" max="100" min="0" aria-labelledby="single" id="range-single" />
        </Range>
    )
}
```

:::

### Multi

```liquid \[js]
<script type="module">
    import { setValue, setOutputValue } from 'winduum/src/components/range/index.js'

    const rangeFrom = document.querySelector('#range-from')
    const rangeTo = document.querySelector('#range-to')

    const setFromValue = ({ currentTarget }) => {
        setValue(currentTarget)

        setOutputValue(currentTarget, document.querySelector('#from'))
    }

    const setToValue = ({ currentTarget }) => {
        setValue(currentTarget, {
            track: 'end'
        })

        setOutputValue(currentTarget, document.querySelector('#to'))
    }



    setFromValue({ currentTarget: rangeFrom })
    rangeFrom.addEventListener('input', setFromValue)

    setToValue({ currentTarget: rangeTo })
    rangeTo.addEventListener('input', setToValue)
</script>
```

### Vertical

```liquid \[js]
<script type="module">
    import { setValue, setOutputValue } from 'winduum/src/components/range/index.js'

    const rangeSingle = document.querySelector('#range-single')

    const setSingleValue = ({ currentTarget }) => {
        setValue(currentTarget)

        setOutputValue(currentTarget, document.querySelector('#single'))
    }

    setSingleValue({ currentTarget: rangeSingle })
    rangeSingle.addEventListener('input', setSingleValue)
</script>
```

## Javascript API

### setTrackProperty

* **Type:** `(options: TrackOptions, track: 'start' | 'end') => void`
* **Kind:** `sync`

#### TrackOptions

***

##### element

* **Type:** `HTMLElement | Element`
* **Default:** `undefined`

***

##### value

* **Type:** `string`
* **Default:** `undefined`

***

##### min

* **Type:** `number`
* **Default:** `undefined`

***

##### max

* **Type:** `number`
* **Default:** `undefined`

***

### setValue

* **Type:** `(element: HTMLInputElement, options: SetValueOptions) => void`
* **Kind:** `sync`

#### DefaultOptions

***

##### selector

* **Type:** `string`
* **Default:** `.x-range`

***

##### track

* **Type:** `string`
* **Default:** `'start' | 'end'`

***

### setOutputValue

* **Type:** `(element: HTMLInputElement, options: SetOutputOptions) => void`
* **Kind:** `sync`

#### SetOutputOptions

***

##### lang

* **Type:** `string`
* **Default:** `document.documentElement.lang`

***

##### formatOptions

* **Type:** `Intl.NumberFormatOptions`
* **Default:** `{ style: 'decimal', minimumFractionDigits: 0, maximumFractionDigits: 0 }`

---

---
url: /docs/components/rating.md
---
# Rating

### Usage

```css
@import "winduum/src/components/rating/index.css" layer(utilities);
```

### Variants

### Props

### Installation

Follow instructions for individual framework usage below

## Examples

### Basic

```html \[html]
<div class="x-rating accent-warning">
    <input type="radio" name="rating" value="1" aria-label="Rate 1/5">
    <input type="radio" name="rating" value="2" aria-label="Rate 2/5">
    <input type="radio" name="rating" value="3" aria-label="Rate 3/5">
    <input type="radio" name="rating" value="4" aria-label="Rate 4/5">
    <input type="radio" name="rating" value="5" aria-label="Rate 5/5">
</div>
```

```vue
<script setup lang="ts">
    import { Rating } from '@/components/rating'
</script>

<template>
    <Rating class="accent-warning">
        <input type="radio" name="rating" value="1" aria-label="Rate 1/5">
        <input type="radio" name="rating" value="2" aria-label="Rate 2/5">
        <input type="radio" name="rating" value="3" aria-label="Rate 3/5">
        <input type="radio" name="rating" value="4" aria-label="Rate 4/5">
        <input type="radio" name="rating" value="5" aria-label="Rate 5/5">
    </Rating>
</template>
```

```jsx
import { Rating } from '@/components/rating'

export function Example() {
    return (
        <Rating class="accent-warning">
            <input type="radio" name="rating" value="1" aria-label="Rate 1/5" />
            <input type="radio" name="rating" value="2" aria-label="Rate 2/5" />
            <input type="radio" name="rating" value="3" aria-label="Rate 3/5" />
            <input type="radio" name="rating" value="4" aria-label="Rate 4/5" />
            <input type="radio" name="rating" value="5" aria-label="Rate 5/5" />
        </Rating>
    )
}
```

:::

---

---
url: /docs/base/reset.md
---
# Reset

New modern CSS reset, that means [Preflight](https://tailwindcss.com/docs/preflight#border-styles-are-reset-globally) from **TailwindCSS** is disabled by default.
You can always enable it again via `tailwind.config.js` if you prefer it more.

Everything except [Defaults](https://github.com/winduum/winduum/blob/main/src/base/defaults.css) is unstyled, so you are free to style your components or use pre-built components.

[`src/base/reset.css`](https://github.com/winduum/winduum/blob/main/src/base/reset.css)

```css
/* Reset all */
:where(a),
:where(address),
:where(button),
:where(blockquote),
:where(body),
:where(caption),
:where(cite),
:where(code),
:where(dd),
:where(details),
:where(dialog),
:where(dl),
:where(dt),
:where(em),
:where(fieldset),
:where(figcaption),
:where(figure),
:where(h1, h2, h3, h4, h5, h6),
:where(hgroup),
:where(hr),
:where(input),
:where(kbd),
:where(label),
:where(legend),
:where(li),
:where(mark),
:where(menu),
:where(ol),
:where(optgroup),
:where(option),
:where(output),
:where(p),
:where(select),
:where(summary),
:where(table),
:where(td),
:where(textarea),
:where(th),
:where(thead),
:where(time),
:where(tr),
:where(ul),
:where(progress),
:where(meter),
:where([popover]) {
  all: unset;
  display: revert;
}

/* Revert table vertical-align */
:where(tr, th, td),
:where(thead, tbody, tfoot) {
  vertical-align: revert;
  background-color: inherit;
}

/* Reset block */
:where(img),
:where(svg),
:where(video),
:where(canvas),
:where(audio),
:where(iframe),
:where(embed),
:where(object),
:where(search),
:where(hr),
:where(summary),
:where(pre > code) {
  display: block;
}

/* Improve consistency of default fonts in all browsers. */
:where(code),
:where(kbd),
:where(samp),
:where(pre) {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 1em;
}

/* Preferred box-sizing value */
:where(*),
:where(*)::before,
:where(*)::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgb(255 255 255 / 0%);
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
:where(sub, sup) {
  vertical-align: baseline;
  font-size: 100%;
}

:where(sub) {
  font-variant-position: sub;
}

:where(sup) {
  font-variant-position: super;
}

/* Add the correct text decoration in Chrome, Edge, and Safari. */
:where(abbr[title]) {
  text-decoration: underline dotted;
}

/* Reapply the pointer cursor for anchor tags */
:where(a, button) {
  cursor: revert;
}

/* Remove list styles (bullets/numbers) */
:where(ol:not([type]), ul, menu) {
  list-style-type: "";
}

/* For images to not be able to exceed their container */
:where(img, iframe) {
  max-inline-size: 100%;
  max-block-size: 100%;
}

/* removes spacing between cells in tables */
:where(table) {
  border-collapse: collapse;
}

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
:where(input, textarea) {
  user-select: auto;
  cursor: revert;
  background-color: revert;
}

/* revert the 'white-space' property for textarea elements on Safari */
:where(textarea) {
  white-space: revert;
}

/* reset default text opacity of input placeholder */
::placeholder {
  color: unset;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly.
   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */
:where([contenteditable]:not([contenteditable="false"])) {
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  user-select: auto;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
  -webkit-user-drag: element;
}

/* Fix input styles */
:where(input) {
  &::-webkit-datetime-edit-fields-wrapper,
  &::-webkit-datetime-edit-text,
  &::-webkit-datetime-edit,
  &::-webkit-datetime-edit-hour-field,
  &::-webkit-datetime-edit-minute-field {
    padding: 0;
  }

  &::-webkit-calendar-picker-indicator,
  &::-webkit-search-cancel-button {
    align-self: center;
    background-position: 50% 50%;
  }
}

/* Remove details summary webkit styles */
::-webkit-details-marker {
  display: none;
}

```

---

---
url: /docs/utilities/ripple.md
---
# Ripple

A material ripple effect that is visible on clicking, you can use it with or without JS by adding `animation-ripple` class.
Use with [Button](/docs/components/button) or any other component.

## Usage

::: code-group

```css
@import "winduum/utilities/ripple.css" layer(utilities);
```

```js
import { showRipple } from 'winduum/src/utilities/ripple'

document.querySelector('#showRipple').addEventListener('click', (e) => {
    showRipple({
        element: e.currentTarget,
        x: e.offsetX,
        y: e.offsetY
    })
})
```

```vue
<script setup>
    import { ref } from 'vue'
    import { showRipple } from 'winduum/src/utilities/ripple'
    import { Button } from '@/components/button'
</script>

<template>
    <Button @click="(e) => showRipple({ element: e.currentTarget, x: e.offsetX, y: e.offsetY })">Show ripple</Button>
</template>
```

:::

## Example

::: code-group

```html
<button class="x-button" id="showRipple">Show ripple</button>
```

```js
import { showRipple } from 'winduum/src/utilities/ripple'

document.querySelector('#showRipple').addEventListener('click', (e) => {
    showRipple({
        element: e.currentTarget,
        x: e.offsetX,
        y: e.offsetY
    })
})
```

:::

## Javascript API

### showRipple

* **Type:** `(event: MouseEvent | ShowRippleEvent, rippleElement?: HTMLElement) => <void>`
* **Kind:** `sync`

```typescript
interface ShowRippleEvent {
    currentTarget?: EventTarget | HTMLElement;
    offsetX: number;
    offsetY: number;
}
```

Shows an animated ripple effect on an element

---

---
url: /docs/utilities/skeleton.md
---
# Skeleton

Introduces a utility class `skeleton` for loading state of a page or a component.

```css
.skeleton {
  background:
    linear-gradient(
      to right,
      var(--skeleton-gradient-from),
      var(--skeleton-gradient-to),
      var(--skeleton-gradient-to),
      var(--skeleton-gradient-from)
    );
  opacity: var(--skeleton-opacity);
  transition: var(--transition-opacity);
  animation: move-indeterminate 1.5s linear infinite;
  background-size: 400% 100%;
}

```

## Example

```html
<div class="skeleton rounded w-full h-16"></div>
```

---

---
url: /docs/utilities/swap.md
---
# Swap

Provides a new utility class `swap` to toggle between elements.

## Examples

### Basic

```html
<label class="x-button circle muted swap">
    <input type="checkbox" aria-label="Checkbox description">
    <svg class="rotate-45 size-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
    </svg>
    <svg class="-rotate-45 size-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
    </svg>
</label>
```

### Aria

```liquid \[js]
<script type="module">
    import { toggleSwap } from 'winduum/src/utilities/swap/index.js'

    document.querySelector('[data-action="swap"]').addEventListener('click', ({ currentTarget }) => toggleSwap(currentTarget))
</script>
```

---

---
url: /docs/utilities/spinner.md
---
# Swap

Provides a new utility class `spinner` for circular animated spinners.

## Examples

### Basic

```html
<div class="flex gap-4">
    <div class="spinner"></div>
    <div class="spinner spinner-circle"></div>
    <svg class="spinner spinner-ring" viewBox="25 25 50 50" stroke-width="5">
        <circle cx="50" cy="50" r="20"></circle>
    </svg>
</div>
```

### Custom

```html
<div class="flex gap-4">
    <div class="spinner size-8 border-4 text-primary"></div>
    <div class="spinner spinner-circle size-8 border-4 text-primary"></div>
    <svg class="spinner spinner-ring size-8 text-primary" viewBox="25 25 50 50" stroke-width="5">
        <circle cx="50" cy="50" r="20"></circle>
    </svg>
</div>
```

---

---
url: /docs/components/switch.md
---
# Switch

### Usage

```css
@import "winduum/src/components/switch/index.css" layer(utilities);
```

### Variants

### Props

### Installation

Follow instructions for individual framework usage below

## Examples

### Basic

```html \[html]
<div class="x-switch">
    <input type="checkbox">
    Switch
</div>
```

```vue
<script setup lang="ts">
    import { Switch } from '@/components/switch'
</script>

<template>
    <Switch class="x-switch">
        <input type="checkbox">
        Switch
    </Switch>
</template>
```

```jsx
import { Switch } from '@/components/switch'

export function Example() {
    return (
        <Switch class="x-switch">
            <input type="checkbox" />
            Switch
        </Switch>
    )
}
```

:::

### Small

```html
<div class="x-switch sm">
    <input type="checkbox">
</div>
```

### Large

```html
<div class="x-switch lg">
    <input type="checkbox">
</div>
```

### Disabled

```html
<div class="x-switch">
    <input type="checkbox" disabled>
    Switch
</div>
```

---

---
url: /docs/components/table.md
---
# Table

Display your data in non-interactive, interactive or responsive tables.


### Usage

```css
@import "winduum/src/components/table/index.css" layer(utilities);
```

### Variants

### Props

### Installation

Follow instructions for individual framework usage below

## Examples

### Default

```html
<div class="x-table border border-body-tertiary text-sm">
    <table>
        <thead class="whitespace-nowrap text-main-secondary font-bold">
            <tr>
                <th>Full name</th>
                <th>Email</th>
                <th>Employment</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Agata Henderson</td>
                <td>a.henderson@example.com</td>
                <td>Interpreter</td>
            </tr>
            <tr>
                <td>Tony Johnston</td>
                <td>t.johnston@example.com</td>
                <td>Singer</td>
            </tr>
            <tr>
                <td>Maya Walker</td>
                <td>m.walker@example.com</td>
                <td>Lawer</td>
            </tr>
        </tbody>
    </table>
</div>
```

### Interactive

```html
<div class="x-table text-sm border border-body-tertiary">
    <table>
        <thead class="whitespace-nowrap">
            <tr class="text-main-secondary font-bold">
                <th class="sticky start-0 z-10">
                    <label class="x-check flex w-max">
                        <input type="checkbox">
                    </label>
                </th>
                <th>Name</th>
                <th>Vacation</th>
                <th>Late arrival</th>
                <th>Employment</th>
                <th>Meeting</th>
                <th>Homeoffice</th>
                <th>Doctor</th>
                <th>Pause</th>
                <th>Worked time</th>
                <th>Total time</th>
            </tr>
        </thead>
        <tbody>
            <tr tabindex="0">
                <td class="sticky start-0 z-10">
                    <label class="x-check flex w-max">
                        <input type="checkbox">
                    </label>
                </td>
                <td>
                    <div class="flex gap-2.5 whitespace-nowrap">
                        <div class="x-image rounded-full size-9">
                            <img src="https://placehold.co/48x48" loading="lazy" alt="">
                        </div>
                        <div>
                            <div class="x-title">John Smith</div>
                            <div class="x-title sm font-normal">
                                Programmer
                            </div>
                        </div>
                    </div>
                </td>
                <td>
                    20 days
                </td>
                <td>
                    12
                </td>
                <td>
                    Full time
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:18&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
            </tr>
            <tr tabindex="0">
                <td class="sticky start-0 z-10">
                    <label class="x-check flex w-max">
                        <input type="checkbox">
                    </label>
                </td>
                <td>
                    <div class="flex gap-2.5 whitespace-nowrap">
                        <div class="x-image rounded-full size-9">
                            <img src="https://placehold.co/48x48" loading="lazy" alt="">
                        </div>
                        <div>
                            <div class="x-title">John Smith</div>
                            <div class="x-title sm font-normal">
                                Programmer
                            </div>
                        </div>
                    </div>
                </td>
                <td>
                    20 days
                </td>
                <td>
                    12
                </td>
                <td>
                    Full time
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:18&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
            </tr>
            <tr tabindex="0">
                <td class="sticky start-0 z-10">
                    <label class="x-check flex w-max">
                        <input type="checkbox">
                    </label>
                </td>
                <td>
                    <div class="flex gap-2.5 whitespace-nowrap">
                        <div class="x-image rounded-full size-9">
                            <img src="https://placehold.co/48x48" loading="lazy" alt="">
                        </div>
                        <div>
                            <div class="x-title">John Smith</div>
                            <div class="x-title sm font-normal">
                                Programmer
                            </div>
                        </div>
                    </div>
                </td>
                <td>
                    20 days
                </td>
                <td>
                    12
                </td>
                <td>
                    Full time
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:18&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
                <td>
                    0:00&nbsp;h
                </td>
            </tr>
        </tbody>
    </table>
</div>
```

### Advanced

```html
<div class="x-table border border-body-tertiary text-sm" style="--x-table-cell-border-inline-width: 1px;">
    <table>
        <caption class="text-center p-4 border-b border-body-tertiary font-bold">Product summary</caption>
        <thead>
            <tr>
                <td colspan="2" rowspan="2"></td>
                <th colspan="3" scope="colgroup">Clothes</th>
                <th colspan="2" scope="colgroup">Accessories</th>
            </tr>
            <tr>
                <th scope="col">Trousers</th>
                <th scope="col">Skirts</th>
                <th scope="col">Dresses</th>
                <th scope="col">Bracelets</th>
                <th scope="col">Rings</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th rowspan="3" scope="rowgroup" tabindex="0">Belgium</th>
                <th scope="row" tabindex="0">Antwerp</th>
                <td tabindex="0">56</td>
                <td tabindex="0">22</td>
                <td tabindex="0">43</td>
                <td tabindex="0">72</td>
                <td tabindex="0">23</td>
            </tr>
            <tr>
                <th scope="row" tabindex="0">Gent</th>
                <td tabindex="0">46</td>
                <td tabindex="0">18</td>
                <td tabindex="0">50</td>
                <td tabindex="0">61</td>
                <td tabindex="0">15</td>
            </tr>
            <tr>
                <th scope="row" tabindex="0">Brussels</th>
                <td tabindex="0">51</td>
                <td tabindex="0">27</td>
                <td tabindex="0">38</td>
                <td tabindex="0">69</td>
                <td tabindex="0">28</td>
            </tr>
            <tr>
                <th rowspan="2" scope="rowgroup" tabindex="0">The Netherlands</th>
                <th scope="row" tabindex="0">Amsterdam</th>
                <td tabindex="0">89</td>
                <td tabindex="0">34</td>
                <td tabindex="0">69</td>
                <td tabindex="0">85</td>
                <td tabindex="0">38</td>
            </tr>
            <tr>
                <th scope="row" tabindex="0">Utrecht</th>
                <td tabindex="0">80</td>
                <td tabindex="0">12</td>
                <td tabindex="0">43</td>
                <td tabindex="0">36</td>
                <td tabindex="0">19</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2" tabindex="0">Sum</td>
                <td colspan="5" tabindex="0">NaN</td>
            </tr>
        </tfoot>
    </table>
</div>
```

---

---
url: /docs/components/tabs.md
---
# Tabs

### Usage

```css
@import "winduum/src/components/tabs/index.css" layer(utilities);
```

### Variants

### Installation

Follow instructions for individual framework usage below

## Examples

### Default

```liquid \[js]
<script type="module">
    import { toggleTab } from "winduum/src/components/tabs"

    const tabElements = document.querySelectorAll('[role="tab"]')
    const tabPanelElements = document.querySelectorAll('[role="tabpanel"]')

    tabElements.forEach(element => {
        element.addEventListener('click', () => {
            tabElements.forEach(target => target.classList.add('ghosted'))
            element.classList.remove('ghosted')

            toggleTab(element, {
                tabElements,
                tabPanelElements
            })
        })
    })
</script>
```

### Custom

```liquid \[js]
<script type="module">
    import { toggleTab } from "winduum/src/components/tabs"

    const tabElements = document.querySelectorAll('[role="tab"]')
    const tabPanelElements = document.querySelectorAll('[role="tabpanel"]')

    tabElements.forEach(element => element.addEventListener('click', () => {
        toggleTab(element, {
            tabElements,
            tabPanelElements
        })
    }))
</script>
```

## Javascript API

### `toggleTab`

* **Type:** `(element: HTMLElement | Element, options?: ToggleTabOptions) => void`
* **Kind:** `sync`

Toggles tab and tab panel aria attributes.

#### ToggleTabOptions

***

##### tabElements

* **Type:** `NodeListOf<Element>`
* **Default:** `undefined`

Elements representing tabs.

##### tabPanelElements

* **Type:** `NodeListOf<Element>`
* **Default:** `undefined`

Elements representing tab panels.

---

---
url: /docs/components/text.md
---
# Text

Typographic defaults for common wysiwyg content. It's an alternative to [prose](https://tailwindcss.com/docs/typography-plugin).

### Usage

```css
@import "winduum/src/components/text/index.css" layer(utilities);
```

### Variants

### Props

### Installation

Follow instructions for individual framework usage below

## Examples

### Text

```html \[html]
<div class="x-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget efficitur
        metus. In bibendum nisi et dui <a href="#">sagittis efficitur</a>. Proin porttitor diam at quam
        finibus, quis porttitor turpis ullamcorper. Quisque iaculis imperdiet nunc in
        hendrerit. Nulla facilisi. Sed at sodales ex. Vivamus ornare auctor ligula et
        lobortis. Nunc metus augue, tristique vitae sagittis ac, interdum eu nisl.
        Curabitur aliquet, lectus ut interdum commodo, ipsum elit gravida libero, in
        laoreet lectus nisl a erat. Sed consequat justo pulvinar turpis pharetra mattis.
        Phasellus non pretium libero.</p>
    <p></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
```

```vue
<script setup lang="ts">
    import { UiText } from '@/components/text'
</script>

<template>
    <UiText class="x-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget efficitur
            metus. In bibendum nisi et dui <a href="#">sagittis efficitur</a>. Proin porttitor diam at quam
            finibus, quis porttitor turpis ullamcorper. Quisque iaculis imperdiet nunc in
            hendrerit. Nulla facilisi. Sed at sodales ex. Vivamus ornare auctor ligula et
            lobortis. Nunc metus augue, tristique vitae sagittis ac, interdum eu nisl.
            Curabitur aliquet, lectus ut interdum commodo, ipsum elit gravida libero, in
            laoreet lectus nisl a erat. Sed consequat justo pulvinar turpis pharetra mattis.
            Phasellus non pretium libero.</p>
        <p></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </UiText>
</template>
```

```jsx
import { UiText } from '@/components/text'

export function Example() {
    return (
        <UiText class="x-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget efficitur
                metus. In bibendum nisi et dui <a href="#">sagittis efficitur</a>. Proin porttitor diam at quam
                finibus, quis porttitor turpis ullamcorper. Quisque iaculis imperdiet nunc in
                hendrerit. Nulla facilisi. Sed at sodales ex. Vivamus ornare auctor ligula et
                lobortis. Nunc metus augue, tristique vitae sagittis ac, interdum eu nisl.
                Curabitur aliquet, lectus ut interdum commodo, ipsum elit gravida libero, in
                laoreet lectus nisl a erat. Sed consequat justo pulvinar turpis pharetra mattis.
                Phasellus non pretium libero.</p>
            <p></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </UiText>
    )
}
```

:::

### Headings

```html
<div class="x-text">
    <h1>h1 heading</h1>
    <h2>h2 heading</h2>
    <h3>h3 heading</h3>
    <h4>h4 heading</h4>
    <h5>h5 heading</h5>
    <h6>h6 heading</h6>
</div>
```

### Lists

```html
<div class="x-text">
    <ul style="max-width: 400px">
        <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
            bibendum nisi et dui
        </li>
        <li>Donec eget efficitur metus</li>
    </ul>
    <p></p>
    <ul style="max-width: 400px; list-style: square">
        <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
            bibendum nisi et dui
        </li>
        <li>Donec eget efficitur metus</li>
    </ul>
    <p></p>
    <ul style="max-width: 400px; list-style: circle">
        <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
            bibendum nisi et dui
        </li>
        <li>Donec eget efficitur metus</li>
    </ul>
    <p></p>
    <ol style="max-width: 400px;">
        <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
            bibendum nisi et dui
        </li>
        <li>Donec eget efficitur metus</li>
    </ol>
    <ol type="1">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol type="A">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol type="a">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol type="I">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol type="i">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
</div>
```

### Blockquote

```html
<div class="x-text">
    <blockquote>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est
        tellus sit amet turpis.
    </blockquote>
</div>
```

### Table

```html
<div class="x-text">
    <table>
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</div>
```

### Figure

```html
<div class="x-text">
    <figure>
        <img src="https://picsum.photos/256/256">
        <figcaption>
            Figure 1: Some beautiful placeholders
        </figcaption>
    </figure>
</div>
```

### Iframe

```html
<div class="x-text">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen="" width="560" height="315" frameborder="0"></iframe>
</div>
```

---

---
url: /docs/base/theme.md
---
# Theme

Theming in Winduum is really easy. All it takes is a few CSS properties. There are two themes by default (light and dark) and to create a new one, you can just extend the default theme.

## Default

Each `color-mix` function also contains `--default-color-space` property, which you can change from `sRGB` to mix colors in different color spaces. You can use colors in any format you want.

### TailwindCSS v4

Instead of `:root, :host` the `v4` `@theme` at-rule is used.

[`tailwindcss/theme/default.css`](https://github.com/winduum/winduum/blob/main/tailwindcss/theme/default.css)

### TailwindCSS v3

[`src/theme/default.css`](https://github.com/winduum/winduum/blob/main/src/theme/default.css)

```css
:root,
:host {
  --default-color-space: srgb;
  --default-color-scheme: light;
  --color-accent: var(--color-primary);
  --color-accent-foreground: var(--color-primary-foreground);
  --color-primary: #3b82f6; /* color.blue.500 */
  --color-primary-foreground: var(--color-light);
  --color-main: #171717; /* color.neutral.900 */
  --color-main-foreground: var(--color-body);
  --color-main-primary: var(--color-main);
  --color-main-secondary: color-mix(in var(--default-color-space), var(--color-main) 75%, var(--color-main-foreground));
  --color-main-tertiary: color-mix(in var(--default-color-space), var(--color-main) 50%, var(--color-main-foreground));
  --color-body: #fff; /* color.white */
  --color-body-foreground: var(--color-main);
  --color-body-primary: var(--color-body);
  --color-body-secondary: color-mix(in var(--default-color-space), var(--color-body) 95%, var(--color-body-foreground));
  --color-body-tertiary: color-mix(in var(--default-color-space), var(--color-body) 90%, var(--color-body-foreground));
  --color-light: #fff; /* color.white */
  --color-light-foreground: var(--color-dark);
  --color-dark: #171717; /* color.neutral.900 */
  --color-dark-foreground: var(--color-light);
  --color-success: #16a34a; /* color.green.600 */
  --color-error: #dc2626; /* color.red.600 */
  --color-warning: #eab308; /* color.yellow.500 */
  --color-info: #0ea5e9; /* color.sky.500 */
}

```

## Default P3

[`src/theme/default-p3.css`](https://github.com/winduum/winduum/blob/main/src/theme/default-p3.css)

Better high range colors for P3 capable displays.

```css
:root,
:host {
  @media (color-gamut: p3) {
    --color-primary: color(display-p3 0.23 0.51 0.96);
    --color-main: color(display-p3 0.09 0.09 0.09);
    --color-body: color(display-p3 1 1 1);
    --color-light: color(display-p3 1 1 1);
    --color-dark: color(display-p3 0.09 0.09 0.09);
    --color-success: color(display-p3 0.09 0.64 0.29);
    --color-error: color(display-p3 0.86 0.15 0.15);
    --color-warning: color(display-p3 0.92 0.7 0.03);
    --color-info: color(display-p3 0.05 0.65 0.91);
  }
}

```

## Dark

[`src/theme/dark.css`](https://github.com/winduum/winduum/blob/main/src/theme/dark.css)

```css
:root.dark,
:host.dark {
  --default-color-scheme: dark;
  --color-main: var(--color-light);
  --color-body: var(--color-dark);
}

```

## Compatibility

Support for `color-mix` is almost `90%` global usage.
But if you want better compatibility you can still use `rgb`
which can be enabled it in the [Config](/docs/base/config.html#settings-rgb) (only for TailwindCSS v3).
In that case, you have to use rgb variants for theming in your own components.

* [`src/theme/default-rgb.css`](https://github.com/winduum/winduum/blob/main/src/theme/default-rgb.css)
* [`src/theme/dark-rgb.css`](https://github.com/winduum/winduum/blob/main/src/theme/dark-rgb.css)

---

---
url: /docs/components/title.md
---
# Title

For common title styles that you can manage from one component across project.

### Usage

```css
@import "winduum/src/components/title/index.css" layer(utilities);
```

### Variants

### Props

### Tokens

* `sm`&#x20;
* `lg`&#x20;

### Installation

Follow instructions for individual framework usage below

## Examples

### Basic

```html \[html]
<div class="x-title">Title</div>
```

```vue
<script setup lang="ts">
    import { Title } from '@/components/title'
</script>

<template>
    <Title>Title</Title>
</template>
```

```jsx
import { Title } from '@/components/title'

export function Example() {
    return (
        <Title>Title</Title>
    )
}
```

:::

### Small

```html
<h3 class="x-title sm">Title H3</h3>
```

### Large

```html
<h3 class="x-title lg">Title H1</h3>
```

### Weight

```html
<h3 class="x-title font-normal">Title H1</h3>
```

### Uppercase

```html
<div class="x-title uppercase">Title</div>
```

### Color

```html
<div class="x-title text-primary">Title</div>
```

---

---
url: /docs/components/toast.md
---
# Toast

Let it bake and fly from your [Toaster](/docs/components/toaster)!

## Usage

::: code-group

```css
@import "winduum/src/components/toast/index.css" layer(utilities);
```

```js
import { showToast, closeToast } from 'winduum/src/components/toaster'

document.querySelector('#insertToast').addEventListener('click', async () => {
    const toaster = document.querySelector('.x-toaster')

    toaster.insertAdjacentHTML('beforeend', `
        <li class="x-toast" role="status" aria-live="assertive" aria-atomic="true" popover="manual">
            <div class="x-toast-content">
                <div class="flex-col">
                    <div class="x-title">Hello toast</div>
                    <div class="x-text">Amazing toast</div>
                </div>
                <button class="x-button muted ml-auto" data-action="closeToast">Close</button>
            </div>
        </li>
    `)

    await showToast(toaster.children[toaster.children.length - 1])

    const closeToastButton = document.querySelectorAll('[data-action="closeToast"]')[document.querySelectorAll('[data-action="closeToast"]').length - 1]

    closeToastButton.addEventListener('click', ({ currentTarget }) => {
        closeToast(currentTarget.closest('.c-toast'))
    })
})
```

```html
<body>
    <!-- your html !-->
    <ol class="x-toaster items-end"></ol>
</body>
```

:::

### Variants

### Installation

Follow instructions for individual framework usage below

## Example

::: code-group

```html
<button class="x-button" id="insertToast">Show toast</button>

<ol class="x-toaster items-end"></ol>

<script type="module">
    import { showToast, closeToast } from 'winduum/src/components/toaster'

    document.querySelector('#insertToast').addEventListener('click', async () => {
        const toaster = document.querySelector('.x-toaster')

        toaster.insertAdjacentHTML('beforeend', `
            <li class="x-toast" role="status" aria-live="assertive" aria-atomic="true" popover="manual">
                <div class="x-toast-content">
                    <div class="flex-col">
                        <div class="x-title">Hello toast</div>
                        <div class="x-text">Amazing toast</div>
                    </div>
                    <button class="x-button muted ml-auto" data-action="closeToast">Close</button>
                </div>
            </li>
        `)

        await showToast(toaster.children[toaster.children.length - 1])

        const closeToastButton = document.querySelectorAll('[data-action="closeToast"]')[document.querySelectorAll('[data-action="closeToast"]').length - 1]

        closeToastButton.addEventListener('click', ({ currentTarget }) => {
            closeToast(currentTarget.closest('.c-toast'))
        })
    })
</script>
```

:::

## JavaScript API

### `showToast`

* **Type:** `(selector:  HTMLElement, options?: ShowToastOptions) => Promise<void>`
* **Kind:** `async`

Applies an enter animation to existing toast.

#### Example

```js
import { showToast } from 'winduum/src/components/toaster'

document.querySelector('#showToast').addEventListener('click', async () => {
    await showToast(document.querySelector('#toastElement'))
})
```

#### ShowToastOptions

***

##### openAttribute

* **Type:** `string`
* **Default:** `data-open`

***

##### autoHide

* **Type:** `number`
* **Default:** `null`

***

##### heightProperty

* **Type:** `string`
* **Default:** `--x-toast-height`

***

##### close

* **Type:** `CloseToastOptions`
* **Default:** `{}`

***

### `closeToast`

* **Type:** `(selector:  HTMLElement, options?: CloseToastOptions) => Promise<void>`
* **Kind:** `async`

Applies an exit animation to existing toast and removes it from DOM.

#### Example

```js
import { showToast } from 'winduum/src/components/toaster'

document.querySelector('#closeToast').addEventListener('click', async () => {
    await closeToast(document.querySelector('#toastElement'))
})
```

#### CloseToastOptions

***

##### closedAttribute

* **Type:** `data-closed`
* **Default:** `out`

***

##### heightProperty

* **Type:** `string`
* **Default:** `--x-toast-height`

***

---

---
url: /docs/components/toaster.md
---
# Toaster

Bake your [Toast](/docs/components/toast) and let it fly! You should insert in into your `<body>`

## Usage

```css
@import "winduum/src/components/toaster/index.css" layer(utilities);
```

### Variants

### Installation

Follow instructions for individual framework usage below

## Example

```html
<ol class="x-toaster items-end"></ol>
```

### `closeToaster`

* **Type:** `(selector:  HTMLElement, options?: CloseToastOptions) => Promise<void>`
* **Kind:** `async`

All toasts are closed at once.

#### Example

```js
import { showToast } from 'winduum/src/components/toaster'

document.querySelector('#closeToaster').addEventListener('click', async () => {
    await closeToaster(document.querySelector('.c-toaster'))
})
```

---

---
url: /docs/tokens.md
---
# Tokens

Every component has class tokens which you can use for component customization. These tokens can be used with TailwindCSS variants.

For example `x-heading max-md:sm` changes the size on the `md` breakpoint. This was possible automatically with TailwindCSS `v3`, since `v4` this is not working anymore (see [#16000](https://github.com/tailwindlabs/tailwindcss/issues/16000)).

To replicate the same functionality, you have to use the new `@utility` at-rule manually. None of the components use this by default.

**Example of a custom component with default import:**
(variants will not work)

```css
@import "winduum/src/components/heading/index.css" layer(utilities);
/* this file includes following imports
@import "winduum/src/components/heading/props/default.css";
@import "winduum/src/components/heading/default.css";
@import "winduum/src/components/heading/sm.css";
@import "winduum/src/components/heading/lg.css";
 */
```

**Example of a custom component with custom import:**
(you will have to include all tokens manually and variants will work)

```css
@import "winduum/src/components/heading/props/default.css" layer(theme);
@import "winduum/src/components/heading/default.css" layer(utilities);

@layer theme {
    :root, :host {
        --x-heading-font-weight: var(--font-bold);
        /* any custom properties */   
    }
}

@layer utilities {
    .x-heading {
        /* any custom styles */
    }
}

@utility sm {
  .x-heading:is(&) {
    --x-heading-font-size: var(--text-lg);
  }
}

@utility lg {
  .x-heading:is(&) {
    --x-heading-font-size: var(--text-3xl);
  }
}
```

---

---
url: /docs/components/tooltip.md
---
# Tooltip

Tooltip can be used for a little info hint on hover or focus.

## Usage

::: code-group

```css
@import "winduum/src/components/tooltip/index.css" layer(utilities);
```

```html \[html]
<div class="x-tooltip bottom" aria-label="I am tooltip">
    <button class="x-button">Tooltip</button>
</div>
```

```vue
<script setup>
    import { Tooltip } from '@/components/tooltip'
    import { Button } from '@/components/button'
</script>

<template>
    <Tooltip aria-label="I am a tooltip!">
        <Button>Tooltip</Button>
    </Tooltip>
</template>
```

:::

### Variants

### Tokens

* `top`
* `bottom`
* `left`
* `right`

### Installation

Follow instructions for individual framework usage below

## Examples

### Basic

```html
<div class="x-tooltip bottom" aria-label="I am tooltip">
    <button class="x-button">Tooltip</button>
</div>
```

---

---
url: /docs/base/transitions.md
---
# Transitions

This activates the [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) with cross-document animations.
CSS properties can be changed via [Config](https://github.com/winduum/winduum/blob/main/src/theme/config.css).

[`src/base/transitions.css`](https://github.com/winduum/winduum/blob/main/src/base/transitions.css)

```css
@view-transition {
    navigation: auto;
}

::view-transition-group(main) {
    animation-duration: var(--view-transition-main-duration);
}

::view-transition-new(main) {
    animation-delay: var(--view-transition-main-duration);
}

```

Add `view-transition-main` class to any element you want to animate page navigation.

[`src/utilities/view-transition.css`](https://github.com/winduum/winduum/blob/main/src/utilities/view-transition.css)

```css
.view-transition-main {
    view-transition-name: main;
}
```

---

---
url: /docs/utilities/underline.md
---
# Underline

Extends [`underline`](https://tailwindcss.com/docs/text-decoration) utility class for easy underline animations.

```css
.underline {
  text-underline-offset: var(--default-underline-offset, 0.125em);
}

.underline-transparent {
  &:where(:any-link, button:enabled, [role="button"]) {
    transition: all var(--default-transition-duration) var(--ease-in-out);

    &:not(:hover, :focus-visible) {
      text-underline-offset: var(--default-underline-transparent-offset, -0.25em);
      text-decoration-color: transparent;
    }
  }
}

```

## Example

```html
<a href="#" class="underline transition hover:text-primary" title="">
    Link Default
</a>
<a href="#" class="text-primary underline underline-transparent" title="">
    Link Primary
</a>
```