@knadh/oat 0.1.0

package/css/skeleton.css

@@ -0,0 +1,43 @@
+@layer components {
+  [role="status"].skeleton {
+    margin-bottom: var(--space-3);
+    background: var(--muted);
+    border-radius: var(--radius-medium);
+    animation: shimmer 2s infinite;
+    background-size: 200% 100%;
+    background-image: linear-gradient(
+      90deg,
+      var(--muted) 0%,
+      color-mix(in srgb, var(--muted) 30%, white) 30%,
+      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;
+    }
+
+    &.line {
+      height: 1rem;
+      width: 100%;
+    }
+  }
+
+  [role="status"].skeleton:last-child {
+    margin-bottom: 0;
+  }
+
+  @keyframes shimmer {
+    from { background-position: 200% 0; }
+    to { background-position: -200% 0; }
+  }
+}

package/css/spinner.css

@@ -0,0 +1,27 @@
+@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;
+
+    &.small {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    &.large {
+      width: 2rem;
+      height: 2rem;
+      border-width: 3px;
+    }
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/css/table.css

@@ -0,0 +1,40 @@
+@layer base {
+  table {
+    border-collapse: collapse;
+    table-layout: fixed;
+    width: 100%;
+    font-size: var(--text-7);
+  }
+
+  thead {
+    border-bottom: 1px solid var(--border);
+  }
+
+  th, td {
+    overflow-wrap: break-word;
+  }
+
+  th {
+    padding: var(--space-3) var(--space-2);
+    text-align: left;
+    font-weight: var(--font-medium);
+    color: var(--muted-foreground);
+  }
+
+  td {
+    padding: var(--space-3) var(--space-2);
+  }
+
+  tbody tr {
+    border-bottom: 1px solid var(--border);
+    transition: background-color var(--transition-fast);
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background-color: rgb(from var(--muted) r g b / 0.5);
+    }
+  }
+}

package/css/tabs.css

@@ -0,0 +1,44 @@
+@layer components {
+  [role="tablist"] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-1);
+    background-color: var(--muted);
+    border-radius: var(--radius-medium);
+  }
+
+  [role="tab"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-7);
+    font-weight: var(--font-medium);
+    white-space: nowrap;
+    background-color: transparent;
+    color: var(--muted-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);
+    }
+
+    &[aria-selected="true"] {
+      background-color: var(--background);
+      color: var(--foreground);
+      box-shadow: var(--shadow-small);
+    }
+  }
+
+  [role="tabpanel"] {
+    padding: var(--space-4) 0;
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+}

package/css/toast.css

@@ -0,0 +1,115 @@
+@layer components {
+  .toast-container {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    pointer-events: none;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+
+    overflow: visible;
+
+    &::backdrop {
+      display: none;
+    }
+
+    &[data-placement="top-left"] {
+      inset: var(--space-4) auto auto var(--space-4);
+    }
+
+    &[data-placement="top-center"] {
+      inset: var(--space-4) auto auto 50%;
+      transform: translateX(-50%);
+    }
+
+    &[data-placement="top-right"] {
+      inset: var(--space-4) var(--space-4) auto auto;
+    }
+
+    &[data-placement="bottom-left"] {
+      inset: auto auto var(--space-4) var(--space-4);
+      flex-direction: column-reverse;
+    }
+
+    &[data-placement="bottom-center"] {
+      inset: auto auto var(--space-4) 50%;
+      transform: translateX(-50%);
+      flex-direction: column-reverse;
+    }
+
+    &[data-placement="bottom-right"] {
+      inset: auto var(--space-4) var(--space-4) auto;
+      flex-direction: column-reverse;
+    }
+  }
+
+  .toast {
+    padding: var(--space-5) var(--space-4);
+    max-width: 28rem;
+    min-width: 20rem;
+    pointer-events: auto;
+    background-color: var(--card);
+    border: 1px solid var(--border);
+    border-left-width: var(--space-1);
+    border-left-style: solid;
+    border-radius: var(--radius-medium);
+    box-shadow: var(--shadow-small);
+    transition: opacity 150ms, transform 150ms, margin 150ms;
+    line-height: 1;
+
+    .toast-title {
+      font-weight: 600;
+      margin: 0 0 var(--space-3) 0;
+    }
+    .toast-message {
+      color: var(--muted-foreground);
+    }
+
+    &[data-variant="success"] {
+      border-left-color: var(--success);
+    }
+
+    &[data-variant="danger"] {
+      border-left-color: var(--danger);
+    }
+
+    &[data-variant="warning"] {
+      border-left-color: var(--warning);
+    }
+
+    &[data-variant="info"] {
+      border-left-color: var(--secondary);
+    }
+
+    & > [data-close] {
+      margin-inline-start: auto;
+      background: none;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      opacity: 0.5;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    margin: var(--space-2) 0;
+
+    &[data-entering] {
+      opacity: 0;
+      transform: translateY(-1rem);
+    }
+
+    &[data-exiting] {
+      opacity: 0;
+      margin: 0;
+      padding-block: 0;
+      max-height: 0;
+      overflow: hidden;
+      transition: opacity 200ms, margin 200ms, padding 200ms, max-height 200ms;
+    }
+  }
+}

package/css/tooltip.css

@@ -0,0 +1,47 @@
+@layer components {
+  [data-tooltip] {
+    position: relative;
+  }
+
+  [data-tooltip]::before,
+  [data-tooltip]::after {
+    position: absolute;
+    left: 50%;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
+    pointer-events: none;
+    z-index: 1000;
+  }
+
+  /* Text */
+  [data-tooltip]::after {
+    content: attr(data-tooltip);
+    bottom: calc(100% + 10px);
+    transform: translateX(-50%) translateY(4px);
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-7);
+    line-height: 1;
+    white-space: nowrap;
+    background: var(--foreground);
+    color: var(--background);
+    border-radius: var(--radius-medium);
+  }
+
+  /* Arrow */
+  [data-tooltip]::before {
+    content: '';
+    bottom: calc(100% - 5px);
+    transform: translateX(-50%) translateY(4px);
+    border: 8px solid transparent;
+    border-top-color: var(--foreground);
+  }
+
+  [data-tooltip]:is(:hover, :focus-visible)::before,
+  [data-tooltip]:is(:hover, :focus-visible)::after {
+    opacity: 1;
+    visibility: visible;
+    transition-delay: 700ms;
+    transform: translateX(-50%) translateY(0);
+  }
+}

package/css/utilities.css

@@ -0,0 +1,64 @@
+@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: left; }
+  .text-center { text-align: center; }
+  .text-right { text-align: right; }
+  .text-light { color: var(--muted-foreground); }
+  .text-lighter { color: var(--muted-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; }
+
+  /* Bootstrap inspired. */
+  .hstack {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+  .vstack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .gap-1 { gap: var(--space-1); }
+  .gap-2 { gap: var(--space-2); }
+  .gap-4 { gap: var(--space-4); }
+
+  .mt-2 { margin-top: var(--space-2); }
+  .mt-4 { margin-top: var(--space-4); }
+  .mt-6 { margin-top: var(--space-6); }
+
+  .mb-2 { margin-bottom: var(--space-2); }
+  .mb-4 { margin-bottom: var(--space-4); }
+  .mb-6 { margin-bottom: var(--space-6); }
+  .p-4 { padding: var(--space-4); }
+
+  .w-100 { width: 100%; }
+}
+
+ul, ol {
+  &.unstyled {
+    list-style: none;
+    padding-left: 0;
+    margin-left: 0;
+  }
+}

package/js/base.js

@@ -0,0 +1,106 @@
+// oat - Base Web Component Class
+// Provides lifecycle management, event handling, and utilities.
+
+class OtBase 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();
+  }
+
+  // Override in WebComponent subclasses for init logic.
+  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);
+  }
+
+  // Emit a custom event.
+  emit(name, detail = null) {
+    return this.dispatchEvent(new CustomEvent(name, {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+      detail
+    }));
+  }
+
+  // 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);
+  }
+
+  // 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);
+  }
+}
+
+// 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]');
+    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();
+    }
+  });
+}

package/js/dropdown.js

@@ -0,0 +1,74 @@
+/**
+ * oat - Dropdown Component
+ * Provides positioning, keyboard navigation, and ARIA state management.
+ *
+ * Usage:
+ * <ot-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>
+ * </ot-dropdown>
+ */
+
+class OtDropdown extends OtBase {
+  #menu;
+  #trigger;
+  #position;
+
+  init() {
+    this.#menu = this.$('menu[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 rect = this.#trigger.getBoundingClientRect();
+      this.#menu.style.top = `${rect.bottom}px`;
+      this.#menu.style.left = `${rect.left}px`;
+    };
+  }
+
+  ontoggle(e) {
+    if (e.newState === 'open') {
+      this.#position();
+      window.addEventListener('scroll', this.#position, true);
+      this.$('[role="menuitem"]')?.focus();
+      this.#trigger.ariaExpanded = 'true';
+    } else {
+      window.removeEventListener('scroll', this.#position, true);
+      this.#trigger.ariaExpanded = 'false';
+      this.#trigger.focus();
+    }
+  }
+
+  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;
+    }
+  }
+
+  cleanup() {
+    window.removeEventListener('scroll', this.#position, true);
+  }
+}
+
+customElements.define('ot-dropdown', OtDropdown);

package/js/sidebar.js

@@ -0,0 +1,11 @@
+/**
+ * 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');
+  }
+});

package/js/tabs.js

@@ -0,0 +1,105 @@
+/**
+ * oat - Tabs Component
+ * Provides keyboard navigation and ARIA state management.
+ *
+ * Usage:
+ * <ot-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>
+ * </ot-tabs>
+ */
+
+class OtTabs extends OtBase {
+  #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('ot-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 || `ot-tab-${this.uid()}`;
+      const panelId = panel.id || `ot-panel-${this.uid()}`;
+
+      tab.id = tabId;
+      panel.id = panelId;
+      tab.setAttribute('aria-controls', panelId);
+      panel.setAttribute('aria-labelledby', tabId);
+
+      tab.addEventListener('click', this);
+      tab.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) {
+    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;
+    }
+
+    this.#activate(newIdx);
+    this.#tabs[newIdx].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('ot-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('ot-tabs', OtTabs);