@knadh/oat 0.2.0 → 0.4.0

package/css/sidebar.css

@@ -1,54 +1,49 @@
 @layer components {
   :root {
-    --topnav-height: var(--space-12);
-    --sidebar-width: 14rem;
+    --_nh: var(--space-12);
   }
 
   [data-sidebar-layout] {
+    --topnav-offset: 0px;
+    --topnav-scroll-offset: 0px;
+
     display: grid;
-    grid-template-columns: var(--sidebar-width) 1fr;
+    grid-template-columns: 14rem 1fr;
     min-height: 100dvh;
     gap: var(--space-4);
 
     &:has(nav[data-topnav]) {
-      > aside[data-sidebar] {
-        top: var(--topnav-height);
-        height: calc(100dvh - var(--topnav-height));
-      }
+      --topnav-offset: var(--_nh);
+      --topnav-scroll-offset: calc(var(--_nh) + var(--space-6));
+    }
 
-      /* <main> immediately after top-nav, adjust for topnav height */
-      > main {
-        min-width: 0;
-        margin-block-start: calc(var(--topnav-height));
+    > main {
+      min-width: 0;
+      margin-block-start: var(--topnav-offset);
 
-        /* Offset #anchor scrolling to not go behind the topnav. */
-        [id] {
-          scroll-margin-block-start: calc(var(--topnav-height) + var(--space-6));
-        }
+      [id] {
+        scroll-margin-block-start: var(--topnav-scroll-offset);
       }
     }
 
     > aside[data-sidebar] {
       position: sticky;
-      top: 0;
+      top: var(--topnav-offset);
       z-index: 1;
-      height: 100dvh;
+      height: calc(100dvh - var(--topnav-offset));
       align-self: start;
       background-color: var(--background);
       border-inline-end: 1px solid var(--border);
       display: flex;
       flex-direction: column;
-      width: var(--sidebar-width);
 
-      > header {
+      > :is(header, footer) {
         flex-shrink: 0;
         padding: var(--space-3);
       }
 
       > footer {
-        flex-shrink: 0;
         margin-block-start: auto;
-        padding: var(--space-3);
       }
 
       > nav {
@@ -56,9 +51,7 @@
         min-height: 0;
         overflow-y: auto;
         padding: var(--space-3) var(--space-2);
-      }
 
-      nav {
         ul {
           list-style: none;
           padding: 0;
@@ -82,34 +75,31 @@
           border-radius: var(--radius-small);
           transition: background-color var(--transition-fast);
 
-          &:hover, &[aria-current] {
+          &:is(:hover, [aria-current]) {
             background-color: var(--accent);
           }
         }
-      }
 
-      details {
-        border: none;
-        overflow: visible;
+        details {
+          border: none;
+          overflow: visible;
 
-        & + details { margin-top: 0; }
-        &[open] summary { border-bottom: none; }
-        > ul { margin-inline-start: var(--space-4); padding: var(--space-1) 0; }
-      }
+          & + details { margin-top: 0; }
+          &[open] summary { border-bottom: none; }
+          > ul { margin-inline-start: var(--space-4); padding: var(--space-1) 0; }
+        }
+
+        summary {
+          justify-content: flex-start;
+          padding: var(--space-2) var(--space-3);
+          font-size: var(--text-7);
+          border-radius: var(--radius-small);
 
-      summary {
-        justify-content: flex-start;
-        gap: var(--space-2);
-        padding: var(--space-2) var(--space-3);
-        font-size: var(--text-7);
-        font-weight: var(--font-medium);
-        color: var(--foreground);
-        border-radius: var(--radius-small);
-
-        &::after {
-          width: 0.75rem;
-          height: 0.75rem;
-          margin-inline-start: auto;
+          &::after {
+            width: 0.75rem;
+            height: 0.75rem;
+            margin-inline-start: auto;
+          }
         }
       }
     }
@@ -117,10 +107,9 @@
 
   nav[data-topnav] {
     position: fixed;
-    inset-block-start: 0;
-    inset-inline: 0;
+    inset: 0 0 auto;
     z-index: 5;
-    min-height: var(--topnav-height);
+    min-height: var(--_nh);
     display: flex;
     align-items: center;
     gap: var(--space-3);
@@ -130,8 +119,7 @@
     box-shadow: var(--shadow-small);
   }
 
-  [data-sidebar-toggle],
-  [data-sidebar-header] {
+  :is([data-sidebar-toggle], [data-sidebar-header]) {
     display: none;
   }
 
@@ -143,15 +131,43 @@
     cursor: pointer;
   }
 
+  @media (min-width: 769px) {
+    [data-sidebar-layout="always"] [data-sidebar-toggle] {
+      display: inline-block;
+    }
+
+    [data-sidebar-layout="always"] {
+      transition: grid-template-columns var(--transition);
+
+      > aside[data-sidebar] {
+        transform: translateX(0);
+        opacity: 1;
+        transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
+      }
+    }
+
+    [data-sidebar-layout="always"][data-sidebar-open] {
+      grid-template-columns: 0px 1fr;
+      gap: 0;
+
+      > aside[data-sidebar] {
+        overflow: hidden;
+        min-width: 0;
+        transform: translateX(-100%);
+        opacity: 0;
+        visibility: hidden;
+        border-inline-end: none;
+      }
+    }
+  }
+
   @media (max-width: 768px) {
     [data-sidebar-layout] {
       grid-template-columns: 1fr;
 
       > aside[data-sidebar] {
         position: fixed;
-        top: 0;
         left: 0;
-        height: 100dvh;
         width: 16rem;
         transform: translateX(-100%);
         transition: transform var(--transition);
@@ -162,7 +178,6 @@
         transform: translateX(0);
       }
     }
-
     [data-sidebar-toggle] { display: inline-block; }
 
     [data-sidebar-header] {

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/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) {