Merge pull request #71 from devmount/tasks/improve-docs

Improve docs

Author: devmount

docs/assets/scripts/docs.js

@@ -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');
+    });
   });
 });
 

docs/pages/components/loader.md

@@ -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>
+```

docs/pages/components/tab.md

@@ -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.
@@ -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>
 
@@ -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>
@@ -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>
@@ -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>

docs/pages/components/tooltip.md

@@ -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 `
` 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.

src/core/_form.css

@@ -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);