@knadh/oat 0.3.0 → 0.4.0

package/css/spinner.css

@@ -1,22 +1,47 @@
 @layer components {
-  .spinner {
-    width: 1.5rem;
-    height: 1.5rem;
-    border: 2px solid var(--muted);
-    border-top-color: var(--primary);
-    border-radius: var(--radius-full);
-    animation: spin 1s linear infinite;
+  [aria-busy="true"] {
+    &::before {
+      content: "";
+      display: inline-block;
+      inset: 0;
+      margin: auto;
+      width: 1.5rem;
+      height: 1.5rem;
+      border: 2px solid var(--muted);
+      border-top-color: var(--primary);
+      border-radius: var(--radius-full);
+      animation: spin 1s linear infinite;
+      text-align: center;
+    }
 
-    &.small {
+    &[data-spinner~="small"]::before {
       width: 1rem;
       height: 1rem;
     }
 
-    &.large {
+    &[data-spinner~="large"]::before {
       width: 2rem;
       height: 2rem;
       border-width: 3px;
     }
+
+    &[data-spinner~="overlay"] {
+      position: relative;
+
+      > * {
+        opacity: 0.3;
+
+        /* "disable" all elements in the container while it's busy */
+        pointer-events: none;
+      }
+
+      &::before {
+        position: absolute;
+        inset: 0;
+        margin: auto;
+        z-index: 1;
+      }
+    }
   }
 
   @keyframes spin {

package/css/tabs.css

@@ -17,19 +17,18 @@
     font-weight: var(--font-medium);
     white-space: nowrap;
     background-color: transparent;
-    color: var(--muted-foreground);
+    color: var(--foreground);
     border: none;
     border-radius: calc(var(--radius-medium) - 2px);
     cursor: pointer;
     transition: background-color var(--transition-fast), color var(--transition-fast);
 
     &:hover {
-      color: var(--foreground);
+      color: var(--muted-foreground);
     }
 
     &[aria-selected="true"] {
       background-color: var(--background);
-      color: var(--foreground);
       box-shadow: var(--shadow-small);
     }
   }

package/css/toast.css

@@ -46,6 +46,9 @@
   }
 
   .toast {
+    --transition: 300ms;
+    --transition-in: calc(var(--transition) - 50ms);
+
     padding: var(--space-5) var(--space-4);
     max-width: 28rem;
     min-width: 20rem;
@@ -56,7 +59,7 @@
     border-inline-start-style: solid;
     border-radius: var(--radius-medium);
     box-shadow: var(--shadow-small);
-    transition: opacity 150ms, transform 150ms, margin 150ms;
+    transition: opacity var(--transition-in), transform var(--transition-in), margin var(--transition-in);
     line-height: 1;
 
     .toast-title {
@@ -69,18 +72,23 @@
 
     &[data-variant="success"] {
       border-inline-start-color: var(--success);
+      .toast-title {
+        color: var(--success);
+      }
     }
 
     &[data-variant="danger"] {
       border-inline-start-color: var(--danger);
+      .toast-title {
+        color: var(--danger);
+      }
     }
 
     &[data-variant="warning"] {
       border-inline-start-color: var(--warning);
-    }
-
-    &[data-variant="info"] {
-      border-inline-start-color: var(--secondary);
+      .toast-title {
+        color: var(--warning);
+      }
     }
 
     & > [data-close] {
@@ -109,7 +117,7 @@
       padding-block: 0;
       max-height: 0;
       overflow: hidden;
-      transition: opacity 200ms, margin 200ms, padding 200ms, max-height 200ms;
+      transition: opacity var(--transition), margin var(--transition), padding var(--transition), max-height var(--transition);
     }
   }
 }

package/css/utilities.css

@@ -1,25 +1,9 @@
 @layer utilities {
-  [hidden] {
-    display: none !important;
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-
   .text-left { text-align: start; }
   .text-center { text-align: center; }
   .text-right { text-align: end; }
   .text-light { color: var(--muted-foreground); }
-  .text-lighter { color: var(--muted-foreground); }
+  .text-lighter { color: var(--faint-foreground); }
 
   .flex { display: flex; }
   .flex-col { flex-direction: column; }
@@ -32,6 +16,9 @@
     display: flex;
     align-items: center;
     gap: var(--space-3);
+    flex-wrap: wrap;
+    align-content: flex-start;
+    height: auto;
   }
   .vstack {
     display: flex;
@@ -53,12 +40,12 @@
   .p-4 { padding: var(--space-4); }
 
   .w-100 { width: 100%; }
-}
 
-ul, ol {
-  &.unstyled {
-    list-style: none;
-    padding-inline-start: 0;
-    margin-inline-start: 0;
+  ul, ol {
+    &.unstyled {
+      list-style: none;
+      padding-inline-start: 0;
+      margin-inline-start: 0;
+    }
   }
 }

package/js/base.js

@@ -1,7 +1,7 @@
 // oat - Base Web Component Class
 // Provides lifecycle management, event handling, and utilities.
 
-class OtBase extends HTMLElement {
+export class OtBase extends HTMLElement {
   #initialized = false;
 
   // Called when element is added to DOM.
@@ -23,9 +23,6 @@ class OtBase extends HTMLElement {
     this.init();
   }
 
-  // Override in WebComponent subclasses for init logic.
-  init() {}
-
   // Called when element is removed from DOM.
   disconnectedCallback() {
     this.cleanup();
@@ -41,6 +38,29 @@ class OtBase extends HTMLElement {
     if (handler) handler.call(this, event);
   }
 
+  // Given a keyboard event (left, right, home, end), the current selection idx
+  // total items in a list, return 0-n index of the next/previous item
+  // for doing a roving keyboard nav.
+  keyNav(event, idx, len, prevKey, nextKey, homeEnd = false) {
+    const { key } = event;
+    let next = -1;
+
+    if (key === nextKey) {
+      next = (idx + 1) % len;
+    } else if (key === prevKey) {
+      next = (idx - 1 + len) % len;
+    } else if (homeEnd) {
+      if (key === 'Home') {
+        next = 0;
+      } else if (key === 'End') {
+        next = len - 1;
+      }
+    }
+
+    if (next >= 0) event.preventDefault();
+    return next;
+  }
+
   // Emit a custom event.
   emit(name, detail = null) {
     return this.dispatchEvent(new CustomEvent(name, {
@@ -51,20 +71,6 @@ class OtBase extends HTMLElement {
     }));
   }
 
-  // Get boolean attribute value.
-  getBool(name) {
-    return this.hasAttribute(name);
-  }
-
-  // Set or remove boolean attribute.
-  setBool(name, value) {
-    if (value) {
-      this.setAttribute(name, '');
-    } else {
-      this.removeAttribute(name);
-    }
-  }
-
   // Query selector within this element.
   $(selector) {
     return this.querySelector(selector);
@@ -81,15 +87,10 @@ class OtBase extends HTMLElement {
   }
 }
 
-// Export for use in other files
-if (typeof window !== 'undefined') {
-  window.OtBase = OtBase;
-}
-
 // Polyfill for command/commandfor (Safari)
 if (!('commandForElement' in HTMLButtonElement.prototype)) {
   document.addEventListener('click', e => {
-    const btn = e.target.closest('[commandfor]');
+    const btn = e.target.closest('button[commandfor]');
     if (!btn) return;
 
     const target = document.getElementById(btn.getAttribute('commandfor'));

package/js/dropdown.js

@@ -12,10 +12,13 @@
  * </ot-dropdown>
  */
 
+import { OtBase } from './base.js';
+
 class OtDropdown extends OtBase {
   #menu;
   #trigger;
   #position;
+  #items;
 
   init() {
     this.#menu = this.$('[popover]');
@@ -29,9 +32,12 @@ class OtDropdown extends OtBase {
     this.#position = () => {
       // Position has to be calculated and applied manually because
       // popover positioning is like fixed, relative to the window.
-      const rect = this.#trigger.getBoundingClientRect();
-      this.#menu.style.top = `${rect.bottom}px`;
-      this.#menu.style.left = `${rect.left}px`;
+      const r = this.#trigger.getBoundingClientRect();
+      const m = this.#menu.getBoundingClientRect();
+
+      // Flip if menu overflows viewport.
+      this.#menu.style.top = `${r.bottom + m.height > window.innerHeight ? r.top - m.height : r.bottom}px`;
+      this.#menu.style.left = `${r.left + m.width > window.innerWidth ? r.right - m.width : r.left}px`;
     };
   }
 
@@ -39,10 +45,13 @@ class OtDropdown extends OtBase {
     if (e.newState === 'open') {
       this.#position();
       window.addEventListener('scroll', this.#position, true);
-      this.$('[role="menuitem"]')?.focus();
+      window.addEventListener('resize', this.#position);
+      this.#items = this.$$('[role="menuitem"]');
+      this.#items[0]?.focus();
       this.#trigger.ariaExpanded = 'true';
     } else {
-      window.removeEventListener('scroll', this.#position, true);
+      this.cleanup();
+      this.#items = null;
       this.#trigger.ariaExpanded = 'false';
       this.#trigger.focus();
     }
@@ -51,23 +60,14 @@ class OtDropdown extends OtBase {
   onkeydown(e) {
     if (!e.target.matches('[role="menuitem"]')) return;
 
-    const items = this.$$('[role="menuitem"]');
-    const idx = items.indexOf(e.target);
-
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault();
-        items[(idx + 1) % items.length]?.focus();
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        items[idx - 1 < 0 ? items.length - 1 : idx - 1]?.focus();
-        break;
-    }
+    const idx = this.#items.indexOf(e.target);
+    const next = this.keyNav(e, idx, this.#items.length, 'ArrowUp', 'ArrowDown', true);
+    if (next >= 0) this.#items[next].focus();
   }
 
   cleanup() {
     window.removeEventListener('scroll', this.#position, true);
+    window.removeEventListener('resize', this.#position);
   }
 }
 

package/js/index.js

@@ -0,0 +1,12 @@
+import './base.js';
+import './tabs.js';
+import './dropdown.js';
+import './tooltip.js';
+import './sidebar.js';
+import { toast, toastEl, toastClear } from './toast.js';
+
+// Register the global window.ot.* APIs.
+const ot = window.ot || (window.ot = {});
+ot.toast = toast;
+ot.toast.el = toastEl;
+ot.toast.clear = toastClear;

package/js/sidebar.js

@@ -7,5 +7,16 @@ document.addEventListener('click', (e) => {
   if (toggle) {
     const layout = toggle.closest('[data-sidebar-layout]');
     layout?.toggleAttribute('data-sidebar-open');
+    return;
+  }
+
+  // Dismiss sidebar when clicking outside (when sidebar is not an overlay).
+  if (!e.target.closest('[data-sidebar]')) {
+    const layout = document.querySelector('[data-sidebar-layout][data-sidebar-open]');
+    // Hardcode breakpoint (for now) as there's no way to use a CSS variable in
+    // the @media{} query which could've been picked up here.
+    if (layout && window.matchMedia('(max-width: 768px)').matches) {
+      layout.removeAttribute('data-sidebar-open');
+    }
   }
 });

package/js/tabs.js

@@ -13,6 +13,8 @@
  * </ot-tabs>
  */
 
+import { OtBase } from './base.js';
+
 class OtTabs extends OtBase {
   #tabs = [];
   #panels = [];
@@ -39,11 +41,11 @@ class OtTabs extends OtBase {
       panel.id = panelId;
       tab.setAttribute('aria-controls', panelId);
       panel.setAttribute('aria-labelledby', tabId);
-
-      tab.addEventListener('click', this);
-      tab.addEventListener('keydown', this);
     });
 
+    tablist.addEventListener('click', this);
+    tablist.addEventListener('keydown', this);
+
     // Find initially active tab or default to first.
     const activeTab = this.#tabs.findIndex(t => t.ariaSelected === 'true');
     this.#activate(activeTab >= 0 ? activeTab : 0);
@@ -55,26 +57,13 @@ class OtTabs extends OtBase {
   }
 
   onkeydown(e) {
-    const { key } = e;
-    const idx = this.activeIndex;
-    let newIdx = idx;
-
-    switch (key) {
-      case 'ArrowLeft':
-        e.preventDefault();
-        newIdx = idx - 1;
-        if (newIdx < 0) newIdx = this.#tabs.length - 1;
-        break;
-      case 'ArrowRight':
-        e.preventDefault();
-        newIdx = (idx + 1) % this.#tabs.length;
-        break;
-      default:
-        return;
-    }
+    if (!e.target.closest('[role="tab"]')) return;
 
-    this.#activate(newIdx);
-    this.#tabs[newIdx].focus();
+    const next = this.keyNav(e, this.activeIndex, this.#tabs.length, 'ArrowLeft', 'ArrowRight');
+    if (next >= 0) {
+      this.#activate(next);
+      this.#tabs[next].focus();
+    }
   }
 
   #activate(idx) {

package/js/toast.js

@@ -8,133 +8,137 @@
  *   ot.toast('Something went wrong.', 'Error', { variant: 'danger', placement: 'bottom-center' })
  *
  *   // Custom markup
- *   ot.toastEl(element)
- *   ot.toastEl(element, { duration: 4000, placement: 'bottom-center' })
- *   ot.toastEl(document.querySelector('#my-template'))
+ *   ot.toast.el(element)
+ *   ot.toast.el(element, { duration: 4000, placement: 'bottom-center' })
+ *   ot.toast.el(document.querySelector('#my-template'))
  */
 
-const ot = window.ot || (window.ot = {});
+const toasts = {};
 
-const containers = {};
-const DEFAULT_DURATION = 4000;
-const DEFAULT_PLACEMENT = 'top-right';
-
-function getContainer(placement) {
-  if (!containers[placement]) {
+function _get(placement) {
+  if (!toasts[placement]) {
     const el = document.createElement('div');
     el.className = 'toast-container';
     el.setAttribute('popover', 'manual');
     el.setAttribute('data-placement', placement);
     document.body.appendChild(el);
-    containers[placement] = el;
+    toasts[placement] = el;
   }
 
-  return containers[placement];
+  return toasts[placement];
 }
 
-function show(toast, options = {}) {
-  const { placement = DEFAULT_PLACEMENT, duration = DEFAULT_DURATION } = options;
-  const container = getContainer(placement);
+function _show(el, options = {}) {
+  const { placement = 'top-right', duration = 4000 } = options;
+  const p = _get(placement);
 
-  toast.classList.add('toast');
+  el.classList.add('toast');
 
   let timeout;
 
   // Pause on hover.
-  toast.onmouseenter = () => clearTimeout(timeout);
-  toast.onmouseleave = () => {
+  el.onmouseenter = () => clearTimeout(timeout);
+  el.onmouseleave = () => {
     if (duration > 0) {
-      timeout = setTimeout(() => removeToast(toast, container), duration);
+      timeout = setTimeout(() => _remove(el, p), duration);
     }
   };
 
   // Show with animation.
-  toast.setAttribute('data-entering', '');
-  container.appendChild(toast);
-  container.showPopover();
+  el.setAttribute('data-entering', '');
+  p.appendChild(el);
+  p.showPopover();
 
   // Double RAF to compute styles before transition starts.
   requestAnimationFrame(() => {
     requestAnimationFrame(() => {
-      toast.removeAttribute('data-entering');
+      el.removeAttribute('data-entering');
     });
   });
 
   if (duration > 0) {
-    timeout = setTimeout(() => removeToast(toast, container), duration);
+    timeout = setTimeout(() => _remove(el, p), duration);
+  }
+
+  return el;
+}
+
+function _remove(el, container) {
+  // Ignore if already in the process of exiting.
+  if (el.hasAttribute('data-exiting')) {
+    return;
   }
+  el.setAttribute('data-exiting', '');
+
+  const cleanup = () => {
+    el.remove();
+    if (!container.children.length) {
+      container.hidePopover();
+    }
+  };
 
-  return toast;
+  el.addEventListener('transitionend', cleanup, { once: true });
+
+  // Couldn't confirm what unit this actually returns across browsers, so
+  // assume that it could be ms or s. Also, setTimeou() is required because
+  // there's no guarantee that the `transitionend` event will always fire,
+  // eg: clients that disable animations.
+  const t = getComputedStyle(el).getPropertyValue('--transition').trim();
+  const val = parseFloat(t);
+  const ms = t.endsWith('ms') ? val : val * 1000;
+  setTimeout(cleanup, ms);
 }
 
-// Simple text toast.
-ot.toast = function (message, title, options = {}) {
+// Show a text toast.
+export function toast(message, title, options = {}) {
   const { variant = 'info', ...rest } = options;
 
-  const toast = document.createElement('output');
-  toast.setAttribute('data-variant', variant);
+  const el = document.createElement('output');
+  el.setAttribute('data-variant', variant);
 
   if (title) {
     const titleEl = document.createElement('h6');
     titleEl.className = 'toast-title';
-    titleEl.style.color = `var(--${variant})`;
     titleEl.textContent = title;
-    toast.appendChild(titleEl);
+    el.appendChild(titleEl);
   }
 
-  if (message) {
-    const msgEl = document.createElement('div');
-    msgEl.className = 'toast-message';
-    msgEl.textContent = message;
-    toast.appendChild(msgEl);
-  }
+  const msgEl = document.createElement('div');
+  msgEl.className = 'toast-message';
+  msgEl.textContent = message;
+  el.appendChild(msgEl);
 
-  return show(toast, rest);
-};
+  return _show(el, rest);
+}
 
 // Element-based toast.
-ot.toastEl = function (el, options = {}) {
-  let toast;
+export function toastEl(el, options = {}) {
+  let t;
 
   if (el instanceof HTMLTemplateElement) {
-    toast = el.content.firstElementChild.cloneNode(true);
-  } else if (typeof el === 'string') {
-    toast = document.querySelector(el).cloneNode(true);
-  } else {
-    toast = el.cloneNode(true);
+    t = el.content.firstElementChild?.cloneNode(true);
+  } else if (el) {
+    t = el.cloneNode(true);
   }
 
-  toast.removeAttribute('id');
-
-  return show(toast, options);
-};
-
-function removeToast(toast, container) {
-  if (toast.hasAttribute('data-exiting')) {
+  if (!t) {
     return;
   }
-  toast.setAttribute('data-exiting', '');
 
-  const cleanup = () => {
-    toast.remove();
-    if (!container.children.length) {
-      container.hidePopover();
-    }
-  };
+  t.removeAttribute('id');
 
-  toast.addEventListener('transitionend', cleanup, { once: true });
-  setTimeout(cleanup, 200);
+  return _show(t, options);
 }
 
 // Clear all toasts.
-ot.toast.clear = function (placement) {
-  if (placement && containers[placement]) {
-    containers[placement].innerHTML = '';
-    containers[placement].hidePopover();
+export function toastClear(placement) {
+  if (placement && toasts[placement]) {
+    toasts[placement].innerHTML = '';
+    toasts[placement].hidePopover();
   } else {
-    Object.values(containers).forEach(c => {
+    Object.values(toasts).forEach(c => {
       c.innerHTML = '';
       c.hidePopover();
     });
   }
-};
+}

package/js/tooltip.js

@@ -5,14 +5,32 @@
  */
 
 document.addEventListener('DOMContentLoaded', () => {
-  document.querySelectorAll('[title]').forEach(el => {
-    const text = el.getAttribute('title');
-    if (text) {
-      el.setAttribute('data-tooltip', text);
-      if (!el.hasAttribute('aria-label')) {
-        el.setAttribute('aria-label', text);
-      }
-      el.removeAttribute('title');
+  const _attrib = 'title', _sel = '[title]';
+  const apply = el => {
+    const t = el.getAttribute(_attrib);
+    if (!t) return;
+    el.setAttribute('data-tooltip', t);
+    el.hasAttribute('aria-label') || el.setAttribute('aria-label', t);
+
+    // Kill the original 'title'.
+    el.removeAttribute(_attrib);
+  };
+
+  // Apply to all elements on load.
+  document.querySelectorAll(_sel).forEach(apply);
+
+  // Apply to new elements.
+  new MutationObserver(muts => {
+    for (const m of muts) {
+      apply(m.target);
+
+      for (const n of m.addedNodes)
+        if (n.nodeType === 1) {
+          apply(n);
+          n.querySelectorAll(_sel).forEach(apply);
+        }
     }
+  }).observe(document.body, {
+    childList: true, subtree: true, attributes: true, attributeFilter: [_attrib]
   });
 });