daub-ui 2.6.0 → 2.7.0

package/README.md

@@ -3,9 +3,11 @@
 **Considered CSS components for discerning interfaces.**
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-C67B5C.svg)](LICENSE)
-[![Version](https://img.shields.io/badge/version-2.6.0-3D3832.svg)](https://daub.dev)
+[![Version](https://img.shields.io/badge/version-2.7.0-3D3832.svg)](https://daub.dev)
 [![Components](https://img.shields.io/badge/components-76-D4C4A8.svg)](https://daub.dev)
 
+![CleanShot 2026-03-02 at 16 07 28 - 02](https://github.com/user-attachments/assets/5ddefcde-6f79-4175-b9c4-fc20005c551d)
+
 [Live Demo](https://daub.dev) | [Layout Demos](https://daub.dev/demo.html) | [AI Docs](https://daub.dev/llms.txt)
 
 ---
@@ -25,8 +27,8 @@ A drop-in CSS + JS component library with a tactile, handcrafted aesthetic. 76 c
 
 Alternative CDNs (npm package: `daub-ui`):
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daub-ui@2.6.0/daub.css">
-<script src="https://cdn.jsdelivr.net/npm/daub-ui@2.6.0/daub.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daub-ui@latest/daub.css">
+<script src="https://cdn.jsdelivr.net/npm/daub-ui@latest/daub.js"></script>
 ```
 
 ### Download
@@ -49,7 +51,7 @@ DAUB uses system font stacks by default. For richer typography:
   }
 </style>
 
-<!-- Lucide Icons (used in demos, not required) -->
+<!-- Lucide Icons (recommended — used in all demos) -->
 <script src="https://unpkg.com/lucide@latest"></script>
 ```
 
@@ -367,7 +369,7 @@ No polyfills needed.
 
 See [CHANGELOG.md](CHANGELOG.md) for the full release history.
 
-**Latest: v2.6.0** — Dashboard primitives, table utilities, getColor helper. 76 components, 20 theme families.
+**Latest: v2.7.0** — Overlay skeletons, tooltip fix, dropdown alias, better warnings. 76 components, 20 theme families.
 
 ## License
 

package/components.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.3.0",
+  "version": "2.7.0",
   "prefix": "db-",
   "cdn": {
     "css": "https://daub.dev/daub.css",
@@ -284,6 +284,7 @@
       ],
       "js": true,
       "html": "<div class=\"db-tabs\">\n  <div class=\"db-tabs__list\" role=\"tablist\">\n    <button class=\"db-tabs__tab\" aria-selected=\"true\">Tab 1</button>\n    <button class=\"db-tabs__tab\">Tab 2</button>\n  </div>\n  <div class=\"db-tabs__panel\">Content 1</div>\n  <div class=\"db-tabs__panel\" hidden>Content 2</div>\n</div>",
+      "skeleton": "db-tabs > __list[role=tablist] > __tab + __panel",
       "notes": "JS handles tab switching and panel visibility."
     },
     {
@@ -319,6 +320,7 @@
       ],
       "js": true,
       "html": "<div class=\"db-modal-overlay\" id=\"my-modal\" aria-hidden=\"true\">\n  <div class=\"db-modal\">\n    <div class=\"db-modal__header\">\n      <h2 class=\"db-modal__title\">Title</h2>\n      <button class=\"db-modal__close\" aria-label=\"Close\">&times;</button>\n    </div>\n    <div class=\"db-modal__body\">Content</div>\n    <div class=\"db-modal__footer\">\n      <button class=\"db-btn db-btn--primary\">Confirm</button>\n    </div>\n  </div>\n</div>",
+      "skeleton": "db-modal-overlay#id[aria-hidden] > db-modal > __header + __body + __footer",
       "notes": "Wrap in db-modal-overlay with id. Open: DAUB.openModal('id'). Close: DAUB.closeModal('id')."
     },
     {
@@ -330,6 +332,7 @@
       "children": [],
       "js": true,
       "html": "<div class=\"db-modal-overlay\" id=\"my-modal\" aria-hidden=\"true\">\n  <div class=\"db-modal\">...</div>\n</div>",
+      "skeleton": "db-modal-overlay#id[aria-hidden] > db-modal > __header + __body + __footer",
       "notes": "Container for db-modal. Must have an id attribute for JS API."
     },
     {
@@ -347,6 +350,7 @@
       ],
       "js": true,
       "html": "<div class=\"db-alert-dialog\" id=\"confirm-delete\">\n  <div class=\"db-alert-dialog__overlay\"></div>\n  <div class=\"db-alert-dialog__panel\">\n    <h3 class=\"db-alert-dialog__title\">Are you sure?</h3>\n    <p class=\"db-alert-dialog__desc\">This action cannot be undone.</p>\n    <div class=\"db-alert-dialog__actions\">\n      <button class=\"db-btn db-btn--secondary\" data-action=\"cancel\">Cancel</button>\n      <button class=\"db-btn db-btn--primary\">Continue</button>\n    </div>\n  </div>\n</div>",
+      "skeleton": "db-alert-dialog#id > __overlay + __panel > __title + __desc + __actions",
       "notes": "Open: DAUB.openAlertDialog('id'). data-action=\"cancel\" auto-closes."
     },
     {
@@ -365,6 +369,7 @@
       ],
       "js": true,
       "html": "<div class=\"db-sheet db-sheet--right\" id=\"my-sheet\">\n  <div class=\"db-sheet__overlay\"></div>\n  <div class=\"db-sheet__panel\">\n    <div class=\"db-sheet__header\">\n      <span class=\"db-sheet__title\">Title</span>\n      <button class=\"db-sheet__close\" aria-label=\"Close\">&times;</button>\n    </div>\n    <div class=\"db-sheet__body\">Content</div>\n  </div>\n</div>",
+      "skeleton": "db-sheet.db-sheet--right#id > __overlay + __panel > __header + __body",
       "notes": "Sides: --right (default), --left, --top, --bottom. Open: DAUB.openSheet('id')."
     },
     {
@@ -381,6 +386,7 @@
       ],
       "js": true,
       "html": "<div class=\"db-drawer\" id=\"my-drawer\">\n  <div class=\"db-drawer__overlay\"></div>\n  <div class=\"db-drawer__panel\">\n    <div class=\"db-drawer__handle\"></div>\n    <div class=\"db-drawer__body\">Content</div>\n  </div>\n</div>",
+      "skeleton": "db-drawer#id > __overlay + __panel > __handle + __body",
       "notes": "Mobile-friendly bottom panel. Open: DAUB.openDrawer('id')."
     },
     {
@@ -685,7 +691,8 @@
       ],
       "js": true,
       "html": "<div class=\"db-dropdown\">\n  <button class=\"db-btn db-dropdown__trigger\">Options</button>\n  <div class=\"db-dropdown__content\">\n    <div class=\"db-dropdown__label\">Actions</div>\n    <button class=\"db-dropdown__item\">Edit</button>\n    <hr class=\"db-dropdown__separator\">\n    <button class=\"db-dropdown__item\">Delete</button>\n  </div>\n</div>",
-      "notes": "JS auto-initializes toggle. Right-aligned: add db-dropdown__content--right."
+      "skeleton": "db-dropdown > __trigger + __content > __item + __separator + __label",
+      "notes": "JS auto-initializes toggle. Right-aligned: add db-dropdown__content--right. __menu is an alias for __content."
     },
     {
       "name": "Context Menu",
@@ -700,6 +707,7 @@
       ],
       "js": true,
       "html": "<div data-context-menu=\"my-ctx-menu\">Right-click here</div>\n<div class=\"db-context-menu\" id=\"my-ctx-menu\">\n  <div class=\"db-context-menu__label\">Actions</div>\n  <button class=\"db-context-menu__item\">Copy</button>\n  <hr class=\"db-context-menu__separator\">\n  <button class=\"db-context-menu__item\">Delete</button>\n</div>",
+      "skeleton": "data-context-menu='id' target + db-context-menu#id > __item + __separator + __label",
       "notes": "Triggered by data-context-menu attribute on right-click target."
     },
     {
@@ -721,6 +729,7 @@
       ],
       "js": true,
       "html": "<div class=\"db-command\" id=\"cmd\">\n  <div class=\"db-command__overlay\"></div>\n  <div class=\"db-command__panel\">\n    <div class=\"db-command__input-wrap\">\n      <input class=\"db-command__input\" placeholder=\"Search...\">\n    </div>\n    <div class=\"db-command__list\">\n      <div class=\"db-command__group-label\">Navigation</div>\n      <div class=\"db-command__item\">Home</div>\n    </div>\n  </div>\n</div>",
+      "skeleton": "db-command#id > __overlay + __panel > __input-wrap + __list",
       "notes": "Opens with Ctrl+K / Cmd+K. JS: DAUB.openCommand('id'), DAUB.closeCommand('id')."
     },
     {

package/daub.css

@@ -230,6 +230,7 @@ body::before {
 /* Glass: floating — popovers, dropdowns, hover cards, toasts */
 [data-db-texture="glass"] .db-popover__content,
 [data-db-texture="glass"] .db-dropdown__content,
+[data-db-texture="glass"] .db-dropdown__menu,
 [data-db-texture="glass"] .db-hover-card__content,
 [data-db-texture="glass"] .db-context-menu,
 [data-db-texture="glass"] .db-toast {
@@ -286,11 +287,11 @@ body::before {
 
 /* Per-element texture — applies grain/paper/metal/wood to physical surfaces
    Note: <input>, <textarea>, <select> are void/replaced elements — cannot have ::after.
-   Texture on form fields comes through their wrapper (.db-field, .db-input-group, etc.) */
+   Texture on form fields comes through their wrappers (.db-input-group, .db-input-icon, etc.)
+   NOT .db-field — that wrapper includes labels and helper text which shouldn't have texture. */
 .db-card::after,
 .db-btn--primary::after,
 .db-btn--secondary::after,
-.db-field::after,
 .db-input-group::after,
 .db-input-icon::after,
 .db-search::after,
@@ -4194,7 +4195,8 @@ textarea.db-field__input {
   display: inline-block;
 }
 
-.db-dropdown__content {
+.db-dropdown__content,
+.db-dropdown__menu {
   display: none;
   position: absolute;
   z-index: 1040;
@@ -4208,8 +4210,10 @@ textarea.db-field__input {
   box-shadow: var(--db-shadow-2);
 }
 
-.db-dropdown--open .db-dropdown__content { display: block; }
-.db-dropdown__content--right { left: auto; right: 0; }
+.db-dropdown--open .db-dropdown__content,
+.db-dropdown--open .db-dropdown__menu { display: block; }
+.db-dropdown__content--right,
+.db-dropdown__menu--right { left: auto; right: 0; }
 
 .db-dropdown__item {
   display: flex;
@@ -4294,7 +4298,7 @@ textarea.db-field__input {
    ------------------------------------------------------------ */
 .db-tooltip {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
 }
 
 .db-tooltip__content {

package/daub.js

@@ -1210,6 +1210,8 @@
       drop._dbInit = true;
       var trigger = drop.querySelector('.db-dropdown__trigger');
       if (!trigger) return;
+      var content = drop.querySelector('.db-dropdown__content') || drop.querySelector('.db-dropdown__menu');
+      if (!content) return;
       trigger.addEventListener('click', function(e) {
         e.stopPropagation();
         var wasOpen = drop.classList.contains('db-dropdown--open');
@@ -1659,10 +1661,11 @@
     var isDev = host === 'localhost' || host === '127.0.0.1' || host === '[::1]' || document.documentElement.hasAttribute('data-db-debug');
     if (!isDev) return;
     var checks = [
-      ['.db-dropdown', '.db-dropdown__trigger', 'DAUB: .db-dropdown missing __trigger child'],
+      ['.db-dropdown', '.db-dropdown__trigger', 'DAUB: .db-dropdown missing __trigger child. Add a button.db-dropdown__trigger.'],
+      ['.db-dropdown', '.db-dropdown__content, .db-dropdown__menu', 'DAUB: .db-dropdown missing __content child. Add a div.db-dropdown__content with your menu items.'],
       ['.db-custom-select', '.db-custom-select__trigger', 'DAUB: .db-custom-select missing __trigger child'],
       ['.db-tabs', '.db-tabs__list', 'DAUB: .db-tabs missing __list child'],
-      ['.db-field', '.db-field__input', 'DAUB: .db-field missing __input child'],
+      ['.db-field', '.db-field__input', 'DAUB: .db-field missing child with class "db-field__input". Add db-field__input to your input, textarea, select wrapper, or custom control element.'],
       ['.db-slider', '.db-slider__input', 'DAUB: .db-slider missing __input child'],
       ['.db-accordion', '.db-accordion__item', 'DAUB: .db-accordion has no __item children'],
       ['.db-checkbox', '.db-checkbox__input', 'DAUB: .db-checkbox missing __input child'],
@@ -1673,8 +1676,15 @@
         if (!el.querySelector(c[1])) console.warn(c[2], el);
       });
     });
-    root.querySelectorAll('.db-modal').forEach(function(el) {
-      if (!el.id) console.warn('DAUB: .db-modal missing id attribute', el);
+    root.querySelectorAll('.db-modal-overlay').forEach(function(el) {
+      if (!el.id) console.warn('DAUB: .db-modal-overlay missing id attribute — JS API needs an id to target this modal.', el);
+      if (!el.hasAttribute('aria-hidden')) console.warn('DAUB: .db-modal-overlay should have aria-hidden="true" for accessibility.', el);
+    });
+    root.querySelectorAll('.db-tabs').forEach(function(tabs) {
+      var tabCount = tabs.querySelectorAll('.db-tabs__tab').length;
+      var panelCount = tabs.querySelectorAll('.db-tabs__panel').length;
+      if (panelCount > 0 && tabCount !== panelCount)
+        console.warn('DAUB: .db-tabs has ' + tabCount + ' tabs but ' + panelCount + ' panels — counts should match.', tabs);
     });
   }
 

package/llms.txt

@@ -1,6 +1,6 @@
 # DAUB UI — Considered Component Library for AI Agents
 
-> Version: 2.6.0
+> Version: 2.7.0
 > URL: https://daub.dev
 > CSS: https://daub.dev/daub.css
 > JS: https://daub.dev/daub.js
@@ -20,8 +20,8 @@
 
 Alternative CDNs (npm package: daub-ui):
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daub-ui@2.6.0/daub.css">
-<script src="https://cdn.jsdelivr.net/npm/daub-ui@2.6.0/daub.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daub-ui@latest/daub.css">
+<script src="https://cdn.jsdelivr.net/npm/daub-ui@latest/daub.js"></script>
 ```
 
 Fonts: System font stacks by default. Optional Google Fonts:
@@ -80,7 +80,31 @@ Direct API: `DAUB.setTheme('ink')`, `DAUB.cycleTheme()`, `DAUB.getTheme()`
 Accent API: `DAUB.setAccent('#6B7C3E')`, `DAUB.resetAccent()`, `DAUB.getAccent()`
 Persisted in `localStorage` keys: `db-theme`, `db-scheme`, `db-accent`.
 
-## Components (67)
+## Quick Reference Skeletons
+
+Required HTML nesting for overlay and complex components. Use these as a starting template — each shows the minimum required structure.
+
+| Component | Skeleton | JS API |
+|-----------|----------|--------|
+| Modal | `db-modal-overlay#id[aria-hidden] > db-modal > __header + __body + __footer` | `DAUB.openModal('id')` / `closeModal('id')` |
+| Alert Dialog | `db-alert-dialog#id > __overlay + __panel > __title + __desc + __actions` | `DAUB.openAlertDialog('id')` |
+| Sheet | `db-sheet.--right#id > __overlay + __panel > __header + __body` | `DAUB.openSheet('id')` |
+| Drawer | `db-drawer#id > __overlay + __panel > __handle + __body` | `DAUB.openDrawer('id')` |
+| Command Palette | `db-command#id > __overlay + __panel > __input-wrap + __list` | `DAUB.openCommand('id')` |
+| Dropdown Menu | `db-dropdown > __trigger + __content > __item + __separator` | Auto-init on click |
+| Context Menu | `[data-context-menu='id'] + db-context-menu#id > __item + __separator` | Auto-init on right-click |
+| Tabs | `db-tabs > __list[role=tablist] > __tab + __panel` | Auto-init |
+| Accordion | `db-accordion > __item > __trigger + __content` | Auto-init |
+| Custom Select | `db-custom-select > __trigger + __dropdown > __option` | Auto-init |
+
+**Notes:**
+- `__` prefix means BEM child of the block (e.g., `__header` = `db-modal__header`)
+- Overlay wrappers (modal-overlay, alert-dialog, sheet, drawer, command) need an `id` for JS targeting
+- `db-modal-overlay` also needs `aria-hidden="true"` for accessibility
+- `db-field__input` goes on wrapper elements — not just `<input>` tags
+- Icons: DAUB pairs well with [Lucide](https://unpkg.com/lucide@latest) — all demos use Lucide icons
+
+## Components (76)
 
 ### 1. Button — `.db-btn`
 Variants: `db-btn--primary`, `db-btn--secondary`, `db-btn--ghost`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "daub-ui",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "Considered CSS component library — 76 components, 20 theme families, zero build step",
   "main": "daub.js",
   "style": "daub.css",