@apliteni/apliteni-ui 0.6.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Apliteni shared design system & UI kit — tokens, components and the deck theme, framework-agnostic (HTML + CSS).",
   "type": "module",
   "license": "UNLICENSED",

package/src/components/tabs.js

@@ -0,0 +1,72 @@
+// Tabs — an accessible tablist + panels, as a framework-agnostic HTML string.
+// Render with tabs(), then wire behaviour once after mount with initTabs().
+//
+//   root.innerHTML = tabs({
+//     name: 'account', active: 0, ariaLabel: 'Account sections',
+//     items: [
+//       { label: 'Overview',  panel: '<p>…</p>' },
+//       { label: 'Activity',  panel: '<p>…</p>' },
+//       { label: 'Settings',  panel: '<p>…</p>' },
+//     ],
+//   });
+//   initTabs(root);
+//
+// Follows the WAI-ARIA tabs pattern: roving tabindex, ArrowLeft/Right + Home/End,
+// aria-selected, and aria-controls / aria-labelledby wiring. `name` must be unique
+// per tabs instance on a page (it seeds the tab/panel ids).
+
+export function tabs({ items = [], active = 0, name = 'tabs', ariaLabel = 'Tabs', className = '' } = {}) {
+  const cls = ['ui-tabs', className].filter(Boolean).join(' ');
+  const list = items
+    .map((it, i) => {
+      const on = i === active;
+      return `<button class="ui-tabs__tab${on ? ' is-active' : ''}" role="tab"`
+        + ` id="${name}-tab-${i}" aria-controls="${name}-panel-${i}"`
+        + ` aria-selected="${on ? 'true' : 'false'}" tabindex="${on ? '0' : '-1'}">${it.label}</button>`;
+    })
+    .join('');
+  const panels = items
+    .map((it, i) => {
+      const on = i === active;
+      return `<div class="ui-tabs__panel" role="tabpanel" id="${name}-panel-${i}"`
+        + ` aria-labelledby="${name}-tab-${i}"${on ? '' : ' hidden'}>${it.panel || ''}</div>`;
+    })
+    .join('');
+  return `<div class="${cls}" data-tabs>`
+    + `<div class="ui-tabs__list" role="tablist" aria-label="${ariaLabel}">${list}</div>`
+    + `<div class="ui-tabs__panels">${panels}</div>`
+    + `</div>`;
+}
+
+// Wire click + keyboard for every [data-tabs] under `root`. Idempotent-safe to
+// call once after the markup mounts. No-op off-DOM (SSR / node --test).
+export function initTabs(root) {
+  if (typeof document === 'undefined') return;
+  const scope = root || document;
+  scope.querySelectorAll('[data-tabs]').forEach((el) => {
+    const tabEls = Array.prototype.slice.call(el.querySelectorAll('[role="tab"]'));
+    const panelFor = (t) => el.querySelector('[id="' + t.getAttribute('aria-controls') + '"]');
+    const select = (i, focus) => {
+      tabEls.forEach((t, j) => {
+        const on = j === i;
+        t.classList.toggle('is-active', on);
+        t.setAttribute('aria-selected', on ? 'true' : 'false');
+        t.tabIndex = on ? 0 : -1;
+        const p = panelFor(t);
+        if (p) p.hidden = !on;
+      });
+      if (focus && tabEls[i]) tabEls[i].focus();
+    };
+    tabEls.forEach((t, i) => {
+      t.addEventListener('click', () => select(i));
+      t.addEventListener('keydown', (e) => {
+        let n = null;
+        if (e.key === 'ArrowRight') n = (i + 1) % tabEls.length;
+        else if (e.key === 'ArrowLeft') n = (i - 1 + tabEls.length) % tabEls.length;
+        else if (e.key === 'Home') n = 0;
+        else if (e.key === 'End') n = tabEls.length - 1;
+        if (n !== null) { e.preventDefault(); select(n, true); }
+      });
+    });
+  });
+}

package/src/index.css

@@ -12,6 +12,7 @@
 @import "./styles/card.css";
 @import "./styles/badge.css";
 @import "./styles/segmented.css";
+@import "./styles/tabs.css";
 @import "./styles/input.css";
 @import "./styles/dropdown.css";
 @import "./styles/nav.css";

package/src/index.js

@@ -2,6 +2,7 @@
 // Styles ship separately: `import 'apliteni-ui/css'`.
 export * from './components/index.js';
 export * from './components/dropdown.js';
+export * from './components/tabs.js';
 export * from './components/nav.js';
 export * from './components/drawer.js';
 export * from './components/topbar.js';

package/src/inline.js

@@ -33,6 +33,7 @@ export const styles = {
   card: read('styles/card.css'),
   badge: read('styles/badge.css'),
   segmented: read('styles/segmented.css'),
+  tabs: read('styles/tabs.css'),
   input: read('styles/input.css'),
   dropdown: read('styles/dropdown.css'),
   nav: read('styles/nav.css'),
@@ -56,6 +57,7 @@ export const cssText = [
   styles.card,
   styles.badge,
   styles.segmented,
+  styles.tabs,
   styles.input,
   styles.dropdown,
   styles.nav,

package/src/styles/tabs.css

@@ -0,0 +1,28 @@
+/* ============================================================================
+ * Tabs — .ui-tabs
+ * A tablist with an underline indicator + panels. Markup comes from tabs() in
+ * components/tabs.js; wire it with initTabs(). Colours read the accent tokens.
+ * ========================================================================== */
+.ui-tabs__list {
+  display: flex;
+  gap: 2px;
+  border-bottom: 1px solid var(--border);
+}
+.ui-tabs__tab {
+  appearance: none;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  font: 600 14px/1 var(--font-sans);
+  color: var(--dim);
+  padding: 11px 14px;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
+}
+.ui-tabs__tab:hover { color: var(--text); }
+.ui-tabs__tab.is-active { color: var(--strong); border-bottom-color: var(--accent); }
+.ui-tabs__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 7px 7px 0 0; }
+
+.ui-tabs__panels { padding-top: 20px; }
+.ui-tabs__panel[hidden] { display: none; }