Skip to content

Improve docs #71

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
devmount merged 4 commits into from
Jul 30, 2025
Merged

Improve docs #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
35ea434
➕ Add js example for docs
devmount Jul 30, 2025
e08aa4c
➕ Add input loader to loader docs
devmount Jul 30, 2025
b1767c9
➕ Add example for multiline tooltip
devmount Jul 30, 2025
3fe9997
💚 Slightly improve disabled input appearance
devmount Jul 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 15 additions & 12 deletions docs/assets/scripts/docs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,18 +100,21 @@ const colorToast = (col) => {
}

// Component: Tab
const tabList = document.querySelector('#tab-demo > nav > ol');
const tabPanels = document.querySelectorAll('#tab-demo > section > div');
const tabs = tabList
? [...tabList.querySelectorAll('li')].filter(t => !t.classList.contains('disabled'))
: [];
tabs.forEach((tab, i) => {
tab.addEventListener('click', () => {
tabs.forEach(t => t.classList.remove('active'))
tabPanels.forEach(p => p.classList.remove('active'));
const panel = [...tabPanels][i];
panel.classList.add('active');
tab.classList.add('active');
const tabGroup = document.querySelectorAll('.tab-group');
tabGroup.forEach((group) => {
const tabList = group.querySelector('nav > ol');
const tabPanels = group.querySelectorAll('section > div');
const tabs = tabList
? [...tabList.querySelectorAll('li')].filter(t => !t.classList.contains('disabled'))
: [];
tabs.forEach((tab, i) => {
tab.addEventListener('click', () => {
tabs.forEach(t => t.classList.remove('active'))
tabPanels.forEach(p => p.classList.remove('active'));
const panel = [...tabPanels][i];
panel?.classList.add('active');
tab.classList.add('active');
});
});
});

Expand Down
22 changes: 22 additions & 0 deletions docs/pages/components/loader.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,3 +75,25 @@ Loaders are also supported on <a href="/components/button">button</a> elements.
<button class="busy success">Save profile</button>
<button class="busy alert">Delete account</button>
```

### Input loader

Similar to buttons, loaders are also supported on <a href="/components/input">input</a> elements. Use the `busy` class to replace the contents of an input element with a loader while keeping the input size.

<div class="demo flex flex-wrap items-center gap-8">
<div class="input busy">
<input type="text" value="My fancy username" disabled />
</div>
<div class="input busy">
<input type="text" class="pill" value="My fancy username" disabled />
</div>
</div>

```html
<div class="input busy">
<input type="text" value="My fancy username" disabled />
</div>
<div class="input busy">
<input type="text" class="pill" value="My fancy username" disabled />
</div>
```
57 changes: 54 additions & 3 deletions docs/pages/components/tab.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,28 @@ Use the `tab-group` class on a parent element containing a `<nav>` with an order
</div>
```

To make the tabs actually work, you can use the following simple script in vanilla JavaScript. It applies to all `.tab-group` elements, even if there are multiple ones on the same page. It adds a click event listener to all tabs, that are not disabled and moves the `.active` class to the clicked tab accordingly.

```js
const tabGroup = document.querySelectorAll('.tab-group');
tabGroup.forEach((group) => {
const tabList = group.querySelector('nav > ol');
const tabPanels = group.querySelectorAll('section > div');
const tabs = tabList
? [...tabList.querySelectorAll('li')].filter(t => !t.classList.contains('disabled'))
: [];
tabs.forEach((tab, i) => {
tab.addEventListener('click', () => {
tabs.forEach(t => t.classList.remove('active'))
tabPanels.forEach(p => p.classList.remove('active'));
const panel = [...tabPanels][i];
panel?.classList.add('active');
tab.classList.add('active');
});
});
});
```

### Badge

The `badge` class can be used to show [badges](/components/badge) on tab list elements.
Expand All @@ -83,6 +105,11 @@ The `badge` class can be used to show [badges](/components/badge) on tab list el
<li>Invoices</li>
</ol>
</nav>
<section>
<div class="active"></div>
<div></div>
<div></div>
</section>
</div>
</div>

Expand Down Expand Up @@ -116,6 +143,14 @@ Per default the tab bar is on top of the content. The `bottom`, `left` or `right
<h4>Tab bar positioned at the bottom</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at. In eu iaculis lorem. In vehicula sed mauris et suscipit. Vivamus pellentesque non massa sit amet ornare. Integer placerat est vitae nisl molestie, eget rhoncus erat vulputate. Proin ornare massa eget bibendum faucibus.</p>
</div>
<div>
<h4>Quotes created</h4>
<p>In eu iaculis lorem. In vehicula sed mauris et suscipit. Vivamus pellentesque non massa sit amet ornare. Integer placerat est vitae nisl molestie, eget rhoncus erat vulputate. Proin ornare massa eget bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at.</p>
</div>
<div>
<h4>Invoices sent</h4>
<p>Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at. In eu iaculis lorem. In vehicula sed mauris et suscipit. Vivamus pellentesque non massa sit amet ornare. Integer placerat est vitae nisl molestie, eget rhoncus erat vulputate. Proin ornare massa eget bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi.</p>
</div>
</section>
</div>
</div>
Expand Down Expand Up @@ -148,9 +183,17 @@ Per default the tab bar is on top of the content. The `bottom`, `left` or `right
</nav>
<section>
<div class="active">
<h4>Tab bar positioned at the left</h4>
<h4>Tab bar positioned to the left</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at. In eu iaculis lorem. In vehicula sed mauris et suscipit. Vivamus pellentesque non massa sit amet ornare. Integer placerat est vitae nisl molestie, eget rhoncus erat vulputate. Proin ornare massa eget bibendum faucibus.</p>
</div>
<div>
<h4>Quotes created</h4>
<p>In eu iaculis lorem. In vehicula sed mauris et suscipit. Vivamus pellentesque non massa sit amet ornare. Integer placerat est vitae nisl molestie, eget rhoncus erat vulputate. Proin ornare massa eget bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at.</p>
</div>
<div>
<h4>Invoices sent</h4>
<p>Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at. In eu iaculis lorem. In vehicula sed mauris et suscipit. Vivamus pellentesque non massa sit amet ornare. Integer placerat est vitae nisl molestie, eget rhoncus erat vulputate. Proin ornare massa eget bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi.</p>
</div>
</section>
</div>
</div>
Expand Down Expand Up @@ -183,16 +226,24 @@ Per default the tab bar is on top of the content. The `bottom`, `left` or `right
</nav>
<section>
<div class="active">
<h4>Tab bar positioned at the left</h4>
<h4>Tab bar positioned to the right</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at. In eu iaculis lorem. In vehicula sed mauris et suscipit. Vivamus pellentesque non massa sit amet ornare. Integer placerat est vitae nisl molestie, eget rhoncus erat vulputate. Proin ornare massa eget bibendum faucibus.</p>
</div>
<div>
<h4>Quotes created</h4>
<p>In eu iaculis lorem. In vehicula sed mauris et suscipit. Vivamus pellentesque non massa sit amet ornare. Integer placerat est vitae nisl molestie, eget rhoncus erat vulputate. Proin ornare massa eget bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at.</p>
</div>
<div>
<h4>Invoices sent</h4>
<p>Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at. In eu iaculis lorem. In vehicula sed mauris et suscipit. Vivamus pellentesque non massa sit amet ornare. Integer placerat est vitae nisl molestie, eget rhoncus erat vulputate. Proin ornare massa eget bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi.</p>
</div>
</section>
</div>
</div>

```html
<div class="tab-group">
<nav class="left">
<nav class="right">
<ol>
<li class="active">Sales</li>
<li>Quotes</li>
Expand Down
4 changes: 3 additions & 1 deletion docs/pages/components/tooltip.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,16 @@ A tooltip provides additional information for an element on hover or focus.

### Position

Use the `data-tooltip` attribute on any element to attach a tooltip that appears above the element on hover or focus. Linebreaks can be used too.
Use the `data-tooltip` attribute on any element to attach a tooltip that appears above the element on hover or focus. Linebreaks can be inserted too using the `&#10;` line break entity (or another line break character suitable for your use case).

<div class="demo">
<button data-tooltip="Initiate self-destruction">I'm harmless</button>
<button class="alert" data-tooltip="On second thought&#10;I won't do anything">I'm dangerous</button>
</div>

```html
<button data-tooltip="Initiate self-destruction">I'm harmless</button>
<button class="alert" data-tooltip="On second thought&#10;I won't do anything">I'm dangerous</button>
```

To change position, use the `tooltip-left`, `tooltip-bottom` or `tooltip-right` classes accordingly.
Expand Down
1 change: 1 addition & 0 deletions src/core/_form.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ input, textarea, select {
&:disabled {
cursor: not-allowed;
background-color: var(--color-bg-muted);
box-shadow: none;
}
&:user-invalid {
box-shadow: var(--color-alert) var(--shadow-border);
Expand Down