@knadh/oat 0.3.0 → 0.4.1

package/css/skeleton.css

@@ -1,26 +1,22 @@
 @layer components {
   [role="status"].skeleton {
+    --_c: light-dark(
+      color-mix(in srgb, var(--muted) 30%, white),
+      color-mix(in srgb, var(--muted) 90%, var(--foreground))
+    );
+
     margin-block-end: var(--space-3);
     background: var(--muted);
     border-radius: var(--radius-medium);
-    animation: shimmer 2s infinite;
+    animation: anim 2s infinite;
     background-size: 200% 100%;
     background-image: linear-gradient(
       90deg,
       var(--muted) 0%,
-      color-mix(in srgb, var(--muted) 30%, white) 30%,
+      var(--_c) 50%,
       var(--muted) 100%
     );
 
-    [data-theme="dark"] & {
-      background-image: linear-gradient(
-        90deg,
-        var(--muted) 0%,
-        color-mix(in srgb, var(--muted) 90%, var(--foreground)) 90%,
-        var(--muted) 100%
-      );
-    }
-
     &.box {
       width: 4rem;
       height: 4rem;
@@ -36,7 +32,7 @@
     margin-block-end: 0;
   }
 
-  @keyframes shimmer {
+  @keyframes anim {
     from { background-position: 200% 0; }
     to { background-position: -200% 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/table.css

@@ -1,7 +1,13 @@
 @layer base {
+  /* Container to get horizontal scroll on small screens. */
+  .table {
+    min-width: 320px;
+    width: 100%;
+    overflow-x: auto;
+  }
+
   table {
     border-collapse: collapse;
-    table-layout: fixed;
     width: 100%;
     font-size: var(--text-7);
   }

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,37 +1,25 @@
 @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; }
+  .align-left { text-align: start; }
+  .align-center { text-align: center; }
+  .align-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; }
   .items-center { align-items: center; }
   .justify-center { justify-content: center; }
   .justify-between { justify-content: space-between; }
+  .justify-end { justify-content: flex-end; }
 
   /* Bootstrap inspired. */
   .hstack {
     display: flex;
     align-items: center;
-    gap: var(--space-3);
+    gap: var(--space-4);
+    flex-wrap: wrap;
+    align-content: flex-start;
+    height: auto;
   }
   .vstack {
     display: flex;
@@ -53,12 +41,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) {