oat-glassed 0.1.0

package/css/spinner.css

@@ -0,0 +1,52 @@
+@layer components {
+  [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;
+    }
+
+    &[data-spinner~="small"]::before {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    &[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 {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/css/table.css

@@ -0,0 +1,54 @@
+@layer base {
+  .table {
+    min-width: 320px;
+    width: 100%;
+    overflow-x: auto;
+    border-radius: var(--radius-medium);
+    border: 1px solid var(--glass-border);
+    background-color: light-dark(rgb(255 255 255 / 0.3), rgb(255 255 255 / 0.02));
+    box-shadow: var(--glass-edge);
+    contain: paint;
+  }
+
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    font-size: var(--text-7);
+  }
+
+  thead {
+    border-bottom: 1px solid var(--border);
+    background-color: light-dark(rgb(255 255 255 / 0.25), rgb(255 255 255 / 0.03));
+  }
+
+  th, td {
+    overflow-wrap: break-word;
+  }
+
+  th {
+    padding: var(--space-3) var(--space-3);
+    text-align: start;
+    font-weight: var(--font-medium);
+    color: var(--muted-foreground);
+    font-size: var(--text-8);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+  }
+
+  td {
+    padding: var(--space-3);
+  }
+
+  tbody tr {
+    border-bottom: 1px solid var(--border);
+    transition: background-color var(--transition-fast);
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background-color: var(--accent);
+    }
+  }
+}

package/css/tabs.css

@@ -0,0 +1,48 @@
+@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);
+    border: 1px solid var(--glass-border);
+    box-shadow: var(--glass-edge);
+    contain: paint;
+  }
+
+  [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);
+    box-shadow: none;
+    cursor: pointer;
+    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
+
+    &:hover {
+      color: var(--foreground);
+    }
+
+    &[aria-selected="true"] {
+      background-color: light-dark(rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.1));
+      color: var(--foreground);
+      box-shadow: var(--shadow-small);
+    }
+  }
+
+  [role="tabpanel"] {
+    padding: var(--space-4) 0;
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+}

package/css/tag.css

@@ -0,0 +1,67 @@
+@layer components {
+  .tag {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-1) var(--space-3);
+    font-size: var(--text-8);
+    font-weight: var(--font-medium);
+    line-height: var(--leading-normal);
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    border: 1px solid light-dark(rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.06));
+    border-radius: var(--radius-full);
+
+    /* Dismiss button */
+    & > button {
+      all: unset;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 0.875rem;
+      height: 0.875rem;
+      border-radius: var(--radius-full);
+      cursor: pointer;
+      opacity: 0.5;
+      transition: opacity var(--transition-fast), background-color var(--transition-fast);
+
+      &:hover {
+        opacity: 1;
+        background-color: rgb(from currentColor r g b / 0.15);
+      }
+    }
+
+    &.primary {
+      background-color: var(--primary);
+      color: var(--primary-foreground);
+      border-color: rgb(from #fff r g b / 0.12);
+    }
+
+    &.success {
+      color: var(--success);
+      border-color: light-dark(rgb(from var(--success) r g b / 0.15), rgb(from var(--success) r g b / 0.2));
+      background-color: light-dark(
+        color-mix(in srgb, var(--success) 8%, rgb(255 255 255 / 0.35)),
+        color-mix(in srgb, var(--success) 15%, rgb(0 0 0 / 0.25))
+      );
+    }
+
+    &.warning {
+      color: var(--warning);
+      border-color: light-dark(rgb(from var(--warning) r g b / 0.15), rgb(from var(--warning) r g b / 0.2));
+      background-color: light-dark(
+        color-mix(in srgb, var(--warning) 8%, rgb(255 255 255 / 0.35)),
+        color-mix(in srgb, var(--warning) 15%, rgb(0 0 0 / 0.25))
+      );
+    }
+
+    &.danger {
+      color: var(--danger);
+      border-color: light-dark(rgb(from var(--danger) r g b / 0.15), rgb(from var(--danger) r g b / 0.2));
+      background-color: light-dark(
+        color-mix(in srgb, var(--danger) 8%, rgb(255 255 255 / 0.35)),
+        color-mix(in srgb, var(--danger) 15%, rgb(0 0 0 / 0.25))
+      );
+    }
+  }
+}

package/css/toast.css

@@ -0,0 +1,126 @@
+@layer components {
+  .toast-container {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    pointer-events: none;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    content-visibility: auto;
+
+    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 {
+    --transition: 300ms;
+    --transition-in: calc(var(--transition) - 50ms);
+
+    padding: var(--space-5) var(--space-4);
+    max-width: 28rem;
+    min-width: 20rem;
+    pointer-events: auto;
+    background-color: var(--card);
+    background-image: var(--glass-highlight);
+    border: 1px solid var(--glass-border);
+    border-inline-start-width: var(--space-1);
+    border-inline-start-style: solid;
+    border-radius: var(--radius-large);
+    box-shadow: var(--glass-edge), var(--shadow-large);
+    will-change: transform, opacity;
+    transition: opacity var(--transition-in), transform var(--transition-in), margin var(--transition-in);
+    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-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);
+      .toast-title {
+        color: var(--warning);
+      }
+    }
+
+    & > [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) scale(0.95);
+    }
+
+    &[data-exiting] {
+      opacity: 0;
+      margin: 0;
+      padding-block: 0;
+      max-height: 0;
+      overflow: hidden;
+      transition: opacity var(--transition), margin var(--transition), padding var(--transition), max-height var(--transition);
+    }
+  }
+}

package/css/tooltip.css

@@ -0,0 +1,49 @@
+@layer components {
+  [data-tooltip] {
+    position: relative;
+  }
+
+  [data-tooltip]::before,
+  [data-tooltip]::after {
+    position: absolute;
+    inset-inline-start: 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);
+    inset-block-end: 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: light-dark(rgb(20 20 30 / 0.75), rgb(40 40 55 / 0.8));
+    color: #ececf1;
+    border: 1px solid light-dark(rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.12));
+    border-radius: var(--radius-medium);
+    box-shadow: var(--shadow-medium);
+  }
+
+  /* Arrow */
+  [data-tooltip]::before {
+    content: '';
+    inset-block-end: calc(100% - 5px);
+    transform: translateX(-50%) translateY(4px);
+    border: 8px solid transparent;
+    border-top-color: light-dark(rgb(20 20 30 / 0.75), rgb(40 40 55 / 0.8));
+  }
+
+  [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,54 @@
+@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); }
+
+  .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);
+    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-4 { gap: var(--space-4); }
+
+  .mt-2 { margin-block-start: var(--space-2); }
+  .mt-4 { margin-block-start: var(--space-4); }
+  .mt-6 { margin-block-start: var(--space-6); }
+
+  .mb-2 { margin-block-end: var(--space-2); }
+  .mb-4 { margin-block-end: var(--space-4); }
+  .mb-6 { margin-block-end: var(--space-6); }
+  .p-4 { padding: var(--space-4); }
+
+  .w-100 { width: 100%; }
+
+  :is(ul, ol, a).unstyled {
+    list-style: none;
+    text-decoration: none;
+    padding: 0;
+  }
+}

package/js/base.js

@@ -0,0 +1,107 @@
+// oat - Base Web Component Class
+// Provides lifecycle management, event handling, and utilities.
+
+export 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();
+  }
+
+  // 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();
+    }
+  });
+}

package/js/command.js

@@ -0,0 +1,137 @@
+/**
+ * oat - Command Palette Component
+ * Global Cmd/Ctrl+K command palette with search and keyboard navigation.
+ *
+ * Usage:
+ * <ot-command>
+ *   <dialog id="cmd" closedby="any">
+ *     <input type="search" placeholder="Type a command...">
+ *     <div role="listbox">
+ *       <span>Section</span>
+ *       <button role="option">Item 1</button>
+ *       <button role="option">Item 2</button>
+ *     </div>
+ *   </dialog>
+ * </ot-command>
+ */
+
+import { OtBase } from './base.js';
+
+class OtCommand extends OtBase {
+  #dialog;
+  #input;
+  #items;
+  #idx = -1;
+
+  init() {
+    this.#dialog = this.$('dialog') || this.#wrap();
+    this.#input = this.$('input[type="search"]');
+
+    document.addEventListener('keydown', this);
+    this.#dialog.addEventListener('keydown', this);
+
+    if (this.#input) this.#input.addEventListener('input', this);
+
+    this.#dialog.addEventListener('click', this);
+  }
+
+  #wrap() {
+    const d = document.createElement('dialog');
+    d.setAttribute('closedby', 'any');
+    while (this.firstChild) d.appendChild(this.firstChild);
+    this.appendChild(d);
+    return d;
+  }
+
+  /** Open the command palette programmatically. */
+  open() {
+    this.#dialog.showModal();
+    if (this.#input) {
+      this.#input.value = '';
+      this.#input.focus();
+    }
+    this.#reset();
+  }
+
+  #reset() {
+    this.#idx = -1;
+    this.$$('[role="listbox"] > *').forEach(el => (el.hidden = false));
+    this.$$('[role="option"]').forEach(el => el.removeAttribute('aria-selected'));
+  }
+
+  onkeydown(e) {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      e.preventDefault();
+      this.#dialog.open ? this.#dialog.close() : this.open();
+      return;
+    }
+
+    if (!this.#dialog.open) return;
+
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      this.#dialog.close();
+      return;
+    }
+
+    this.#items = this.$$('[role="option"]:not([hidden])');
+    if (!this.#items.length) return;
+
+    const next = this.keyNav(e, this.#idx, this.#items.length, 'ArrowUp', 'ArrowDown', true);
+    if (next >= 0) {
+      this.#idx = next;
+      this.#items.forEach((el, i) =>
+        el.setAttribute('aria-selected', String(i === next))
+      );
+      this.#items[next].scrollIntoView({ block: 'nearest' });
+    }
+
+    if (e.key === 'Enter' && this.#idx >= 0) {
+      e.preventDefault();
+      this.#items[this.#idx].click();
+      this.#dialog.close();
+    }
+  }
+
+  oninput() {
+    const q = this.#input.value.toLowerCase();
+    let section = null;
+    let hasVisible = false;
+
+    for (const el of this.$$('[role="listbox"] > *')) {
+      if (el.matches('[role="option"]')) {
+        const match = !q || el.textContent.toLowerCase().includes(q);
+        el.hidden = !match;
+        if (match) hasVisible = true;
+      } else {
+        if (section) section.hidden = !hasVisible;
+        section = el;
+        hasVisible = false;
+      }
+    }
+    if (section) section.hidden = !hasVisible;
+
+    this.#idx = -1;
+    this.$$('[role="option"]').forEach(el => el.removeAttribute('aria-selected'));
+  }
+
+  onclick(e) {
+    if (e.target === this.#dialog) {
+      this.#dialog.close();
+      return;
+    }
+    if (e.target.closest('[role="option"]')) {
+      this.#dialog.close();
+      return;
+    }
+    if (this.#input && !e.target.closest('input')) {
+      this.#input.focus();
+    }
+  }
+
+  cleanup() {
+    document.removeEventListener('keydown', this);
+  }
+}
+
+customElements.define('ot-command', OtCommand);