@thinking.tools/teff 1.0.0 → 1.0.1

package/css/utilities.css

@@ -0,0 +1,106 @@
+@layer utilities {
+  .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(--faint-foreground); }
+  .text-small { font-size: var(--text-7); }
+  .text-xsmall { font-size: var(--text-8); }
+  .font-normal { font-weight: var(--font-normal); }
+  .font-medium { font-weight: var(--font-medium); }
+  .font-semibold { font-weight: var(--font-semibold); }
+  .tabular { font-variant-numeric: tabular-nums; }
+
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Visually hidden, still read by screen readers. */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .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; }
+  .grow { flex-grow: 1; }
+  .shrink-0 { flex-shrink: 0; }
+  .min-w-0 { min-width: 0; }
+
+  /* Bootstrap inspired. */
+  .hstack {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    flex-wrap: wrap;
+    align-content: flex-start;
+    height: auto;
+
+    > * {
+      margin: 0;
+    }
+  }
+  .vstack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .gap-1 { gap: var(--space-1); }
+  .gap-2 { gap: var(--space-2); }
+  .gap-3 { gap: var(--space-3); }
+  .gap-4 { gap: var(--space-4); }
+  .gap-6 { gap: var(--space-6); }
+
+  .mt-2 { margin-block-start: var(--space-2); }
+  .mt-4 { margin-block-start: var(--space-4); }
+  .mt-6 { margin-block-start: var(--space-6); }
+  .mt-8 { margin-block-start: var(--space-8); }
+
+  .mb-2 { margin-block-end: var(--space-2); }
+  .mb-4 { margin-block-end: var(--space-4); }
+  .mb-6 { margin-block-end: var(--space-6); }
+  .mb-8 { margin-block-end: var(--space-8); }
+
+  .ms-auto { margin-inline-start: auto; }
+  .me-auto { margin-inline-end: auto; }
+  .mx-auto { margin-inline: auto; }
+
+  .p-2 { padding: var(--space-2); }
+  .p-4 { padding: var(--space-4); }
+  .p-6 { padding: var(--space-6); }
+
+  .w-100 { width: 100%; }
+
+  .rounded { border-radius: var(--radius-medium); }
+  .rounded-large { border-radius: var(--radius-large); }
+  .rounded-full { border-radius: var(--radius-full); }
+  .shadow-small { box-shadow: var(--shadow-small); }
+  .shadow-medium { box-shadow: var(--shadow-medium); }
+  .shadow-large { box-shadow: var(--shadow-large); }
+
+  /* 1px alpha outline keeps image edges crisp on any background. */
+  .img-outline {
+    outline: 1px solid light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.1));
+    outline-offset: -1px;
+  }
+
+  :is(ul, ol, a).unstyled {
+    list-style: none;
+    text-decoration: none;
+    padding: 0;
+  }
+}

package/js/base.js

@@ -0,0 +1,137 @@
+// teff - Base Web Component Class
+// Provides lifecycle management, event handling, and utilities.
+
+export class TeffBase extends HTMLElement {
+  #initialized = false;
+
+  // Called when element is added to DOM.
+  connectedCallback() {
+    if (this.#initialized) return;
+
+    // Wait for DOM to be ready.
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => this.#setup(), {
+        once: true,
+      });
+    } else {
+      this.#setup();
+    }
+  }
+
+  // Private setup to ensure that init() is only called once.
+  #setup() {
+    if (this.#initialized) return;
+    this.#initialized = true;
+    this.init();
+  }
+
+  // Called when element is removed from DOM.
+  disconnectedCallback() {
+    this.cleanup();
+  }
+
+  // Override in subclass for cleanup logic.
+  cleanup() {}
+
+  // Central event handler - enables automatic cleanup.
+  // Usage: element.addEventListener('click', this)
+  handleEvent(event) {
+    const handler = this[`on${event.type}`];
+    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, {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail,
+      }),
+    );
+  }
+
+  // Query selector within this element.
+  $(selector) {
+    return this.querySelector(selector);
+  }
+
+  // Query selector all within this element.
+  $$(selector) {
+    return Array.from(this.querySelectorAll(selector));
+  }
+
+  // Generate a unique ID string.
+  uid() {
+    return Math.random().toString(36).slice(2, 10);
+  }
+}
+
+// Polyfill for command/commandfor (Safari)
+if (!("commandForElement" in HTMLButtonElement.prototype)) {
+  document.addEventListener("click", (e) => {
+    const btn = e.target.closest("button[commandfor]");
+    if (!btn) return;
+
+    const target = document.getElementById(btn.getAttribute("commandfor"));
+    if (!target) return;
+
+    const command = btn.getAttribute("command") || "toggle";
+
+    if (target instanceof HTMLDialogElement) {
+      if (command === "show-modal") target.showModal();
+      else if (command === "close") target.close();
+      else target.open ? target.close() : target.showModal();
+    }
+  });
+}
+
+// Close modal dialogs on backdrop click/tap; opt out with <dialog data-static>.
+// pointerdown (not click) so selecting text inside and releasing outside
+// doesn't close, and preventDefault stops the tap bleeding through on touch.
+document.addEventListener(
+  "pointerdown",
+  (e) => {
+    const d = e.target;
+    if (!(d instanceof HTMLDialogElement) || !d.open || d.hasAttribute("data-static")) {
+      return;
+    }
+
+    // Backdrop clicks target the dialog itself; double-check the point is
+    // outside the dialog's box so padding clicks never close it.
+    const r = d.getBoundingClientRect();
+    const inside =
+      e.clientX >= r.left && e.clientX <= r.right &&
+      e.clientY >= r.top && e.clientY <= r.bottom;
+
+    if (!inside) {
+      e.preventDefault();
+      d.close();
+    }
+  },
+  { passive: false },
+);

package/js/dropdown.js

@@ -0,0 +1,81 @@
+/**
+ * teff - Dropdown Component
+ * Provides positioning, keyboard navigation, and ARIA state management.
+ *
+ * Usage:
+ * <teff-dropdown>
+ *   <button popovertarget="menu-id">Options</button>
+ *   <menu popover id="menu-id">
+ *     <button role="menuitem">Item 1</button>
+ *     <button role="menuitem">Item 2</button>
+ *   </menu>
+ * </teff-dropdown>
+ */
+
+import { TeffBase } from "./base.js";
+
+class TeffDropdown extends TeffBase {
+  #menu;
+  #trigger;
+  #position;
+  #items;
+
+  init() {
+    this.#menu = this.$("[popover]");
+    this.#trigger = this.$("[popovertarget]");
+
+    if (!this.#menu || !this.#trigger) return;
+
+    this.#menu.addEventListener("toggle", this);
+    this.#menu.addEventListener("keydown", this);
+
+    this.#position = () => {
+      // Position has to be calculated and applied manually because
+      // popover positioning is like fixed, relative to the window.
+      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`;
+    };
+  }
+
+  ontoggle(e) {
+    if (e.newState === "open") {
+      this.#position();
+      window.addEventListener("scroll", this.#position, true);
+      window.addEventListener("resize", this.#position);
+      this.#items = this.$$('[role="menuitem"]');
+      this.#items[0]?.focus();
+      this.#trigger.ariaExpanded = "true";
+    } else {
+      this.cleanup();
+      this.#items = null;
+      this.#trigger.ariaExpanded = "false";
+      this.#trigger.focus();
+    }
+  }
+
+  onkeydown(e) {
+    if (!e.target.matches('[role="menuitem"]')) return;
+
+    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);
+  }
+}
+
+customElements.define("teff-dropdown", TeffDropdown);

package/js/index.js

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

package/js/password.js

@@ -0,0 +1,58 @@
+/**
+ * teff - Password visibility toggle
+ * Enhances <input type="password"> with a show/hide button that flips the
+ * input between password and text:
+ *
+ *   <input type="password">              → toggle injected on load
+ *   <input type="password" data-static>  → left alone
+ *
+ * Progressive enhancement: without this script the field stays a plain
+ * password input — no dead UI ships in the CSS-only setup. Inputs inside
+ * fieldset.group are skipped (the fused group has its own trailing control).
+ */
+
+const EYE =
+  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>';
+const EYE_OFF =
+  '<svg class="off" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>';
+
+const SEL = 'input[type="password"]';
+
+const apply = (input) => {
+  if (
+    input.hasAttribute("data-static") ||
+    input.closest("[data-password], fieldset.group")
+  )
+    return;
+
+  const wrap = document.createElement("span");
+  wrap.setAttribute("data-password", "");
+  input.before(wrap);
+  wrap.append(input);
+
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.setAttribute("aria-label", "Show password");
+  btn.setAttribute("aria-pressed", "false");
+  btn.innerHTML = EYE + EYE_OFF;
+  btn.addEventListener("click", () => {
+    const show = input.type === "password";
+    input.type = show ? "text" : "password";
+    btn.setAttribute("aria-pressed", String(show));
+  });
+  wrap.append(btn);
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll(SEL).forEach(apply);
+
+  // Enhance password inputs added later (apply() is idempotent).
+  new MutationObserver((muts) => {
+    for (const m of muts)
+      for (const n of m.addedNodes)
+        if (n.nodeType === 1) {
+          if (n.matches?.(SEL)) apply(n);
+          n.querySelectorAll?.(SEL).forEach(apply);
+        }
+  }).observe(document.body, { childList: true, subtree: true });
+});

package/js/shake.js

@@ -0,0 +1,23 @@
+/**
+ * teff - Attention shake
+ * Imperative trigger for the [data-shake] animation:
+ *
+ *   teff.shake(input)   // e.g. on a rejected login attempt
+ *
+ * Re-adds the attribute with a reflow in between so repeat calls restart a
+ * mid-flight animation, and removes it on animationend so the element is
+ * left clean.
+ */
+
+export const shake = (el) => {
+  if (!el) return;
+  el.removeAttribute("data-shake");
+  void el.offsetWidth;
+  el.setAttribute("data-shake", "");
+  const done = (e) => {
+    if (e.target !== el) return;
+    el.removeAttribute("data-shake");
+    el.removeEventListener("animationend", done);
+  };
+  el.addEventListener("animationend", done);
+};

package/js/sidebar.js

@@ -0,0 +1,23 @@
+/**
+ * Sidebar toggle handler
+ * Toggles data-sidebar-open on layout when toggle button is clicked
+ */
+document.addEventListener('click', (e) => {
+  const toggle = e.target.closest('[data-sidebar-toggle]');
+  if (toggle) {
+    const layout = toggle.closest('[data-sidebar-layout]');
+    layout?.toggleAttribute('data-sidebar-open');
+    return;
+  }
+
+  // Dismiss the mobile drawer when clicking outside it, or when following a
+  // link inside it (the drawer would otherwise sit open over the new content).
+  if (!e.target.closest('[data-sidebar]') || e.target.closest('[data-sidebar] a[href]')) {
+    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

@@ -0,0 +1,100 @@
+/**
+ * teff - Tabs Component
+ * Provides keyboard navigation and ARIA state management.
+ *
+ * Usage:
+ * <teff-tabs>
+ *   <div role="tablist">
+ *     <button role="tab">Tab 1</button>
+ *     <button role="tab">Tab 2</button>
+ *   </div>
+ *   <div role="tabpanel">Content 1</div>
+ *   <div role="tabpanel">Content 2</div>
+ * </teff-tabs>
+ */
+
+import { TeffBase } from "./base.js";
+
+class TeffTabs extends TeffBase {
+  #tabs = [];
+  #panels = [];
+
+  init() {
+    const tablist = this.$(':scope > [role="tablist"]');
+    this.#tabs = tablist ? [...tablist.querySelectorAll('[role="tab"]')] : [];
+    this.#panels = this.$$(':scope > [role="tabpanel"]');
+
+    if (this.#tabs.length === 0 || this.#panels.length === 0) {
+      console.warn("teff-tabs: Missing tab or tabpanel elements");
+      return;
+    }
+
+    // Generate IDs and set up ARIA.
+    this.#tabs.forEach((tab, i) => {
+      const panel = this.#panels[i];
+      if (!panel) return;
+
+      const tabId = tab.id || `teff-tab-${this.uid()}`;
+      const panelId = panel.id || `teff-panel-${this.uid()}`;
+
+      tab.id = tabId;
+      panel.id = panelId;
+      tab.setAttribute("aria-controls", panelId);
+      panel.setAttribute("aria-labelledby", tabId);
+    });
+
+    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);
+  }
+
+  onclick(e) {
+    const index = this.#tabs.indexOf(e.target.closest('[role="tab"]'));
+    if (index >= 0) this.#activate(index);
+  }
+
+  onkeydown(e) {
+    if (!e.target.closest('[role="tab"]')) return;
+
+    const next = this.keyNav(
+      e,
+      this.activeIndex,
+      this.#tabs.length,
+      "ArrowLeft",
+      "ArrowRight",
+    );
+    if (next >= 0) {
+      this.#activate(next);
+      this.#tabs[next].focus();
+    }
+  }
+
+  #activate(idx) {
+    this.#tabs.forEach((tab, i) => {
+      const isActive = i === idx;
+      tab.ariaSelected = String(isActive);
+      tab.tabIndex = isActive ? 0 : -1;
+    });
+
+    this.#panels.forEach((panel, i) => {
+      panel.hidden = i !== idx;
+    });
+
+    this.emit("teff-tab-change", { index: idx, tab: this.#tabs[idx] });
+  }
+
+  get activeIndex() {
+    return this.#tabs.findIndex((t) => t.ariaSelected === "true");
+  }
+
+  set activeIndex(value) {
+    if (value >= 0 && value < this.#tabs.length) {
+      this.#activate(value);
+    }
+  }
+}
+
+customElements.define("teff-tabs", TeffTabs);

package/js/toast.js

@@ -0,0 +1,144 @@
+/**
+ * teff - Toast Notifications
+ *
+ * Usage:
+ *   teff.toast('Saved!')
+ *   teff.toast('Action completed successfully', 'All good')
+ *   teff.toast('Operation completed.', 'Success', { variant: 'success' })
+ *   teff.toast('Something went wrong.', 'Error', { variant: 'danger', placement: 'bottom-center' })
+ *
+ *   // Custom markup
+ *   teff.toast.el(element)
+ *   teff.toast.el(element, { duration: 4000, placement: 'bottom-center' })
+ *   teff.toast.el(document.querySelector('#my-template'))
+ */
+
+const toasts = {};
+
+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);
+    toasts[placement] = el;
+  }
+
+  return toasts[placement];
+}
+
+function _show(el, options = {}) {
+  const { placement = "top-right", duration = 4000 } = options;
+  const p = _get(placement);
+
+  el.classList.add("toast");
+
+  let timeout;
+
+  // Pause on hover.
+  el.onmouseenter = () => clearTimeout(timeout);
+  el.onmouseleave = () => {
+    if (duration > 0) {
+      timeout = setTimeout(() => _remove(el, p), duration);
+    }
+  };
+
+  // Show with animation.
+  el.setAttribute("data-entering", "");
+  p.appendChild(el);
+  p.showPopover();
+
+  // Double RAF to compute styles before transition starts.
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      el.removeAttribute("data-entering");
+    });
+  });
+
+  if (duration > 0) {
+    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();
+    }
+  };
+
+  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, setTimeout() 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);
+}
+
+// Show a text toast.
+export function toast(message, title, options = {}) {
+  const { variant = "info", ...rest } = options;
+
+  const el = document.createElement("output");
+  el.setAttribute("data-variant", variant);
+
+  if (title) {
+    const titleEl = document.createElement("h6");
+    titleEl.className = "toast-title";
+    titleEl.textContent = title;
+    el.appendChild(titleEl);
+  }
+
+  const msgEl = document.createElement("div");
+  msgEl.className = "toast-message";
+  msgEl.textContent = message;
+  el.appendChild(msgEl);
+
+  return _show(el, rest);
+}
+
+// Element-based toast.
+export function toastEl(el, options = {}) {
+  let t;
+
+  if (el instanceof HTMLTemplateElement) {
+    t = el.content.firstElementChild?.cloneNode(true);
+  } else if (el) {
+    t = el.cloneNode(true);
+  }
+
+  if (!t) {
+    return;
+  }
+
+  t.removeAttribute("id");
+
+  return _show(t, options);
+}
+
+// Clear all toasts.
+export function toastClear(placement) {
+  if (placement && toasts[placement]) {
+    toasts[placement].innerHTML = "";
+    toasts[placement].hidePopover();
+  } else {
+    Object.values(toasts).forEach((c) => {
+      c.innerHTML = "";
+      c.hidePopover();
+    });
+  }
+}