@collectivetrait/lineaui 0.0.0-stage → 1.0.0

package/js/modules/quantity.js

@@ -0,0 +1,63 @@
+import { prefix } from '../config.js';
+
+const ATTR = `data-${prefix}quantity`;
+const DEC = `${prefix}quantity__decrement`;
+const INC = `${prefix}quantity__increment`;
+const INPUT = `${prefix}quantity__input`;
+
+export function initQuantity() {
+  document.querySelectorAll(`[${ATTR}]`).forEach((root) => {
+    if (root._lnQuantity) return;
+    const q = new Quantity(root);
+    q.init();
+  });
+}
+
+export class Quantity {
+  constructor(root) {
+    this.root = root;
+    this.input = root.querySelector(`.${INPUT}`);
+    this.decBtn = root.querySelector(`.${DEC}`);
+    this.incBtn = root.querySelector(`.${INC}`);
+  }
+
+  init() {
+    if (!this.input) return;
+    this.root._lnQuantity = true;
+
+    this.decBtn?.addEventListener('click', () => this.step(-1));
+    this.incBtn?.addEventListener('click', () => this.step(1));
+    this.input.addEventListener('change', () => this.clamp());
+
+    this.updateButtons();
+  }
+
+  get min() { return Number(this.input.min) || 0; }
+  get max() { return Number(this.input.max) || Infinity; }
+  get stepVal() { return Number(this.input.step) || 1; }
+  get value() { return Number(this.input.value) || 0; }
+
+  step(direction) {
+    const next = this.value + (this.stepVal * direction);
+    this.setValue(next);
+  }
+
+  clamp() {
+    let val = this.value;
+    if (val < this.min) val = this.min;
+    if (val > this.max) val = this.max;
+    this.setValue(val);
+  }
+
+  setValue(val) {
+    val = Math.max(this.min, Math.min(val, this.max));
+    this.input.value = val;
+    this.input.dispatchEvent(new Event('change', { bubbles: true }));
+    this.updateButtons();
+  }
+
+  updateButtons() {
+    if (this.decBtn) this.decBtn.disabled = this.value <= this.min;
+    if (this.incBtn) this.incBtn.disabled = this.value >= this.max;
+  }
+}

package/js/modules/rhythm.js

@@ -0,0 +1,21 @@
+import { prefix } from '../config.js';
+
+const ATTR = `data-${prefix}grid-toggle`;
+
+export function initRhythm() {
+  document.querySelectorAll(`[${ATTR}]`).forEach((trigger) => {
+    if (trigger._lnGridToggle) return;
+    trigger._lnGridToggle = true;
+    trigger.addEventListener('click', () => {
+      const selector = trigger.getAttribute(ATTR);
+      const target = selector
+        ? document.querySelector(selector)
+        : trigger.parentElement;
+
+      if (!target) return;
+
+      const active = target.classList.toggle('show-grid');
+      trigger.setAttribute('aria-pressed', String(active));
+    });
+  });
+}

package/js/modules/table.js

@@ -0,0 +1,109 @@
+import { prefix } from '../config.js';
+
+const ATTR = `data-${prefix}table`;
+const SORT = `${prefix}table__sort`;
+const SELECT = `${prefix}table__select`;
+
+export function initTable() {
+  document.querySelectorAll(`[${ATTR}]`).forEach((root) => {
+    if (root._lnTable) return;
+    const t = new Table(root);
+    t.init();
+  });
+}
+
+export class Table {
+  constructor(root) {
+    this.root = root;
+    this.table = root.querySelector('table') || root;
+    this.tbody = this.table.querySelector('tbody');
+  }
+
+  init() {
+    this.root._lnTable = true;
+    this.initSort();
+    this.initSelectAll();
+  }
+
+  initSort() {
+    this.root.querySelectorAll(`.${SORT}`).forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const key = btn.getAttribute('data-sort-key');
+        if (!key || !this.tbody) return;
+
+        const current = btn.getAttribute('aria-sort');
+        const direction = current === 'ascending' ? 'descending' : 'ascending';
+
+        this.root.querySelectorAll(`.${SORT}`).forEach((b) => {
+          b.removeAttribute('aria-sort');
+        });
+
+        btn.setAttribute('aria-sort', direction);
+
+        const colIndex = this.getColumnIndex(btn);
+        if (colIndex === -1) return;
+
+        const rows = [...this.tbody.querySelectorAll('tr')];
+        rows.sort((a, b) => {
+          const aVal = a.cells[colIndex]?.textContent.trim() ?? '';
+          const bVal = b.cells[colIndex]?.textContent.trim() ?? '';
+          const aNum = parseFloat(aVal);
+          const bNum = parseFloat(bVal);
+
+          let cmp;
+          if (!isNaN(aNum) && !isNaN(bNum)) {
+            cmp = aNum - bNum;
+          } else {
+            cmp = aVal.localeCompare(bVal);
+          }
+
+          return direction === 'ascending' ? cmp : -cmp;
+        });
+
+        rows.forEach((row) => this.tbody.appendChild(row));
+
+        this.root.dispatchEvent(
+          new CustomEvent(`${prefix}table:sort`, {
+            bubbles: true,
+            detail: { key, direction }
+          })
+        );
+      });
+    });
+  }
+
+  getColumnIndex(btn) {
+    const th = btn.closest('th');
+    if (!th) return -1;
+    return [...th.parentElement.children].indexOf(th);
+  }
+
+  initSelectAll() {
+    const selectAll = this.root.querySelector(`th .${SELECT}`);
+    if (!selectAll || !this.tbody) return;
+
+    const rowCheckboxes = () => this.tbody.querySelectorAll(`.${SELECT}`);
+
+    selectAll.addEventListener('change', () => {
+      rowCheckboxes().forEach((cb) => {
+        cb.checked = selectAll.checked;
+      });
+
+      this.root.dispatchEvent(
+        new CustomEvent(`${prefix}table:select`, {
+          bubbles: true,
+          detail: { all: selectAll.checked }
+        })
+      );
+    });
+
+    this.tbody.addEventListener('change', (e) => {
+      if (!e.target.classList.contains(SELECT)) return;
+      const boxes = [...rowCheckboxes()];
+      const allChecked = boxes.every((cb) => cb.checked);
+      const someChecked = boxes.some((cb) => cb.checked);
+      selectAll.checked = allChecked;
+      selectAll.indeterminate = someChecked && !allChecked;
+    });
+  }
+}

package/js/modules/tabs.js

@@ -0,0 +1,112 @@
+import { prefix } from '../config.js';
+
+const TAB = `${prefix}tabs__tab`;
+const PANEL = `${prefix}tabs__panel`;
+const LIST = `${prefix}tabs__list`;
+
+export function initTabs() {
+  document.querySelectorAll(`[data-${prefix}tabs]`).forEach((root) => {
+    if (root._lnTabs) return;
+    root._lnTabs = true;
+    const tabs = new Tabs(root);
+    tabs.init();
+  });
+}
+
+export class Tabs {
+  constructor(root) {
+    this.root = root;
+    this.tablist = root.querySelector(`.${LIST}`);
+    this.tabs = [...root.querySelectorAll(`.${TAB}`)];
+    this.panels = [...root.querySelectorAll(`.${PANEL}`)];
+    this.manual = root.dataset[`${prefix}tabs`] === 'manual' ||
+                  root.getAttribute(`data-${prefix}tabs`) === 'manual';
+  }
+
+  init() {
+    if (!this.tablist || this.tabs.length === 0) return;
+
+    this.tablist.setAttribute('role', 'tablist');
+    this.tabs.forEach((tab, i) => {
+      tab.setAttribute('role', 'tab');
+      const panelId = tab.getAttribute('aria-controls');
+      const panel = panelId ? document.getElementById(panelId) : this.panels[i];
+      if (panel) panel.setAttribute('role', 'tabpanel');
+
+      if (tab.getAttribute('aria-selected') !== 'true') {
+        tab.setAttribute('aria-selected', 'false');
+        tab.setAttribute('tabindex', '-1');
+        if (panel) panel.hidden = true;
+      } else {
+        tab.setAttribute('tabindex', '0');
+        if (panel) panel.hidden = false;
+      }
+    });
+
+    if (!this.tabs.some(t => t.getAttribute('aria-selected') === 'true')) {
+      this.activate(this.tabs[0]);
+    }
+
+    this.tablist.addEventListener('keydown', (e) => this.onKeydown(e));
+    this.tablist.addEventListener('click', (e) => {
+      const tab = e.target.closest(`.${TAB}`);
+      if (tab) this.activate(tab);
+    });
+
+    const hashAttr = `data-${prefix}tabs-hash`;
+    if (this.root.hasAttribute(hashAttr)) {
+      this.syncFromHash();
+      window.addEventListener('hashchange', () => this.syncFromHash());
+    }
+  }
+
+  activate(tab) {
+    this.tabs.forEach((t, i) => {
+      const isActive = t === tab;
+      t.setAttribute('aria-selected', isActive ? 'true' : 'false');
+      t.setAttribute('tabindex', isActive ? '0' : '-1');
+      const panelId = t.getAttribute('aria-controls');
+      const panel = panelId ? document.getElementById(panelId) : this.panels[i];
+      if (panel) panel.hidden = !isActive;
+    });
+    tab.focus();
+  }
+
+  onKeydown(e) {
+    const idx = this.tabs.indexOf(e.target);
+    if (idx === -1) return;
+    let next;
+    switch (e.key) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+        next = this.tabs[(idx + 1) % this.tabs.length];
+        break;
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        next = this.tabs[(idx - 1 + this.tabs.length) % this.tabs.length];
+        break;
+      case 'Home':
+        next = this.tabs[0];
+        break;
+      case 'End':
+        next = this.tabs[this.tabs.length - 1];
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    if (this.manual) {
+      next.focus();
+      next.setAttribute('tabindex', '0');
+      e.target.setAttribute('tabindex', '-1');
+    } else {
+      this.activate(next);
+    }
+  }
+
+  syncFromHash() {
+    const hash = location.hash.slice(1);
+    const tab = this.tabs.find(t => t.getAttribute('aria-controls') === hash);
+    if (tab) this.activate(tab);
+  }
+}

package/js/modules/toast.js

@@ -0,0 +1,97 @@
+import { prefix } from '../config.js';
+
+const BLOCK = `${prefix}toast`;
+const REGION = `${prefix}toast-region`;
+let region = null;
+
+export function initToast() {
+  if (!region) {
+    region = document.createElement('div');
+    region.className = `${REGION} ${REGION}--bottom-end`;
+    region.setAttribute('aria-live', 'polite');
+    region.setAttribute('aria-relevant', 'additions');
+    document.body.appendChild(region);
+  }
+}
+
+export class Toast {
+  static show({ title, body, role, duration = 5000, solid = false, position } = {}) {
+    if (!region) initToast();
+
+    if (position) {
+      region.className = `${REGION} ${REGION}--${position}`;
+    }
+
+    const toast = document.createElement('div');
+    const classes = [BLOCK];
+    if (role) classes.push(`${BLOCK}--${role}`);
+    if (solid) classes.push(`${BLOCK}--solid`);
+    toast.className = classes.join(' ');
+    toast.setAttribute('role', 'alert');
+    toast.setAttribute(`data-${prefix}dismissible`, '');
+
+    let html = '';
+
+    html += `<div class="${BLOCK}__content">`;
+    if (title) html += `<div class="${BLOCK}__title">${escapeHtml(title)}</div>`;
+    if (body) html += `<div class="${BLOCK}__body">${escapeHtml(body)}</div>`;
+    html += '</div>';
+
+    html += `<button class="${BLOCK}__close" data-${prefix}dismiss aria-label="Close">&times;</button>`;
+
+    if (duration > 0) {
+      html += `<div class="${BLOCK}__timer" style="width: 100%"></div>`;
+    }
+
+    toast.innerHTML = html;
+    region.appendChild(toast);
+
+    const closeBtn = toast.querySelector(`.${BLOCK}__close`);
+    closeBtn.addEventListener('click', () => remove(toast));
+
+    if (duration > 0) {
+      const timer = toast.querySelector(`.${BLOCK}__timer`);
+      let remaining = duration;
+      let startTime = Date.now();
+      let paused = false;
+
+      const updateTimer = () => {
+        if (paused) return;
+        const elapsed = Date.now() - startTime;
+        const pct = Math.max(0, 1 - elapsed / duration);
+        if (timer) timer.style.width = `${pct * 100}%`;
+
+        if (pct <= 0) {
+          remove(toast);
+        } else {
+          requestAnimationFrame(updateTimer);
+        }
+      };
+
+      requestAnimationFrame(updateTimer);
+
+      toast.addEventListener('mouseenter', () => {
+        paused = true;
+        remaining = Math.max(0, duration - (Date.now() - startTime));
+      });
+
+      toast.addEventListener('mouseleave', () => {
+        paused = false;
+        startTime = Date.now() - (duration - remaining);
+        requestAnimationFrame(updateTimer);
+      });
+    }
+
+    return toast;
+  }
+}
+
+function remove(toast) {
+  toast.remove();
+}
+
+function escapeHtml(str) {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}

package/js/modules/tooltip.js

@@ -0,0 +1,106 @@
+import { prefix } from '../config.js';
+
+const ATTR = `data-${prefix}tooltip`;
+const BLOCK = `${prefix}tooltip`;
+let idCounter = 0;
+
+export function initTooltip() {
+  document.querySelectorAll(`[${ATTR}]`).forEach((trigger) => {
+    if (trigger._lnTooltip) return;
+    const t = new Tooltip(trigger);
+    t.init();
+  });
+}
+
+export class Tooltip {
+  constructor(trigger) {
+    this.trigger = trigger;
+    this.tooltip = null;
+    this.showTimeout = null;
+    this.id = `${BLOCK}-${++idCounter}`;
+  }
+
+  init() {
+    this.trigger._lnTooltip = true;
+    this.trigger.addEventListener('mouseenter', () => this.scheduleShow());
+    this.trigger.addEventListener('focusin', () => this.scheduleShow());
+    this.trigger.addEventListener('mouseleave', () => this.hide());
+    this.trigger.addEventListener('focusout', () => this.hide());
+    this.trigger.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') this.hide();
+    });
+  }
+
+  scheduleShow() {
+    if (this.showTimeout) return;
+    this.showTimeout = setTimeout(() => this.show(), 200);
+  }
+
+  show() {
+    if (this.tooltip) return;
+
+    const text = this.trigger.getAttribute(ATTR);
+    if (!text) return;
+
+    const position = this.trigger.getAttribute(`${ATTR}-position`) || 'top';
+
+    this.tooltip = document.createElement('div');
+    this.tooltip.className = `${BLOCK} ${BLOCK}--${position}`;
+    this.tooltip.id = this.id;
+    this.tooltip.setAttribute('role', 'tooltip');
+    this.tooltip.textContent = text;
+
+    const arrow = document.createElement('div');
+    arrow.className = `${BLOCK}__arrow`;
+    this.tooltip.appendChild(arrow);
+
+    document.body.appendChild(this.tooltip);
+    this.trigger.setAttribute('aria-describedby', this.id);
+
+    this.position(position);
+  }
+
+  hide() {
+    if (this.showTimeout) {
+      clearTimeout(this.showTimeout);
+      this.showTimeout = null;
+    }
+
+    if (this.tooltip) {
+      this.tooltip.remove();
+      this.tooltip = null;
+      this.trigger.removeAttribute('aria-describedby');
+    }
+  }
+
+  position(placement) {
+    if (!this.tooltip) return;
+
+    const triggerRect = this.trigger.getBoundingClientRect();
+    const tooltipRect = this.tooltip.getBoundingClientRect();
+    const gap = 8;
+
+    let top, left;
+
+    switch (placement) {
+      case 'bottom':
+        top = triggerRect.bottom + gap;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+        break;
+      case 'start':
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+        left = triggerRect.left - tooltipRect.width - gap;
+        break;
+      case 'end':
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+        left = triggerRect.right + gap;
+        break;
+      default: // top
+        top = triggerRect.top - tooltipRect.height - gap;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+    }
+
+    this.tooltip.style.top = `${top + window.scrollY}px`;
+    this.tooltip.style.left = `${left + window.scrollX}px`;
+  }
+}

package/js/theme-init.js

@@ -0,0 +1,8 @@
+(function() {
+  try {
+    var t = localStorage.getItem("ln:theme");
+    if (t === "light" || t === "dark") {
+      document.documentElement.dataset.theme = t;
+    }
+  } catch(e) {}
+})();

package/package.json

@@ -1,6 +1,73 @@
 {
   "name": "@collectivetrait/lineaui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "A lightweight SCSS and JavaScript component library built on BEM naming, an 8px vertical rhythm, and cascade layers.",
+  "keywords": [
+    "SCSS library",
+    "BEM",
+    "component library",
+    "vertical rhythm",
+    "SCSS framework",
+    "UI components",
+    "accessible CSS",
+    "lightweight CSS",
+    "cascade layers",
+    "SCSS"
+  ],
+  "author": "Andrés Villarreal",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/collectivetrait/lineaui.git"
+  },
+  "homepage": "https://lineaui.com",
+  "bugs": {
+    "url": "https://github.com/collectivetrait/lineaui/issues"
+  },
+  "type": "module",
+  "main": "dist/bundle.js",
+  "style": "dist/styles.css",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "files": [
+    "dist",
+    "scss",
+    "js",
+    "config.json",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md",
+    "humans.txt"
+  ],
+  "exports": {
+    ".": "./dist/bundle.js",
+    "./dist/styles.css": "./dist/styles.css",
+    "./dist/core.css": "./dist/core.css",
+    "./dist/blocks.css": "./dist/blocks.css",
+    "./dist/utilities.css": "./dist/utilities.css",
+    "./dist/icons.css": "./dist/icons.css",
+    "./dist/icons-manifest.json": "./dist/icons-manifest.json",
+    "./dist/theme-init.js": "./dist/theme-init.js",
+    "./scss": "./scss/_index.scss"
+  },
+  "scripts": {
+    "build": "node build.mjs",
+    "dev": "node build.mjs --watch",
+    "lint": "eslint && stylelint \"scss/**/*.scss\"",
+    "lint:js": "eslint",
+    "lint:scss": "stylelint \"scss/**/*.scss\"",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "cssnano": "^7.0.0",
+    "esbuild": "^0.24.0",
+    "eslint": "^10.12.0",
+    "postcss": "^8.4.0",
+    "sass": "^1.69.5",
+    "stylelint": "^17.16.0",
+    "stylelint-config-standard-scss": "^17.0.0"
+  }
+}

package/scss/_blocks-only.scss

@@ -0,0 +1,4 @@
+@use 'settings' as s;
+
+@forward 'layers';
+@forward 'blocks';

package/scss/_core.scss

@@ -0,0 +1,7 @@
+@use 'settings' as s;
+
+@forward 'layers';
+@forward 'tokens';
+@forward 'base';
+@forward 'layout';
+@forward 'helpers';

package/scss/_index.scss

@@ -0,0 +1,12 @@
+// @use rules must be first in Sass, then @forward, then CSS rules.
+@use 'sass:map';
+@use 'settings' as s;
+
+// _layers.scss emits the @layer order declaration first in the CSS output.
+@forward 'layers';
+@forward 'tokens';
+@forward 'base';
+@forward 'layout';
+@forward 'blocks';
+@forward 'helpers';
+@forward 'utilities';

package/scss/_layers.scss

@@ -0,0 +1,2 @@
+// Cascade layer order — must appear before any @layer blocks in the CSS output.
+@layer external, reset, tokens, base, layout, blocks, helpers, utilities;

package/scss/_utilities-only.scss

@@ -0,0 +1,4 @@
+@use 'settings' as s;
+
+@forward 'layers';
+@forward 'utilities';

package/scss/base/_code.scss

@@ -0,0 +1,50 @@
+@use '../tools/rhythm' as r;
+
+@layer base {
+  :is(code, kbd, samp, var) {
+    // Relative to parent so it scales in prose.
+    font: 0.875em var(--f-mono);
+  }
+
+  // Inline code
+  :not(pre) > code {
+    background-color: var(--surface-sunken);
+    border-radius: var(--r-sm);
+    padding-inline: var(--s-h);
+    font-size: var(--t-code-s);
+    line-height: 1rem;
+  }
+
+  kbd {
+    background-color: var(--surface-raised);
+    border: 1px solid var(--border);
+    border-radius: var(--r-sm);
+    padding: 0.1em var(--s-h);
+    box-shadow: 0 1px 0 var(--border);
+    font-size: var(--t-body-sm-s);
+  }
+
+  pre {
+    font: var(--t-code-s)/var(--t-code-lh) var(--f-mono);
+    background-color: var(--surface-sunken);
+    border-radius: var(--r-xs);
+    overflow-x: auto;
+    tab-size: 2;
+    margin-bottom: r.lines(1);
+
+    // Padding lives on code, not pre.
+    // This keeps highlighted code (where .hljs is on <code>) and plain
+    // specimen code visually identical.
+    code {
+      display: block;
+      padding: var(--s3);
+      font: inherit;
+      background: none;
+      border-radius: 0;
+    }
+  }
+
+  pre:last-child {
+    margin-bottom: 0;
+  }
+}