@africode/core 5.0.6 → 5.0.8

package/AGENTS.md

@@ -376,6 +376,8 @@ export async function screenTransaction(amount, nin) {
 
 **Purpose**: Auto-generated JSON schema that whitelists safe components for AI generation. Prevents hallucinated HTML and enforces A2UI compliance.
 
+**Package note**: `af-`, `af-ui-`, and `af-dashboard-` components are all part of the same unified `@africode/core` package, sharing theme, styles, registry, and versioning.
+
 **Generated by**: `scripts/generate-component-schema.js`
 
 ```json

package/COMPONENT_SCHEMA.json

@@ -1,6 +1,7 @@
 {
   "version": "5.0.0",
   "timestamp": "2026-06-28T10:52:30.385Z",
+  "packageNote": "All af-, af-ui-, and af-dashboard components ship together in @africode/core as a unified AfriCode UI system.",
   "components": [
     {
       "tagName": "af-accordion",

package/README.md

@@ -349,6 +349,8 @@ Then use them in your HTML:
 
 AfriCode now includes a native UI kit with shadcn-inspired Web Components for rapid interface design. The Tailwind starter demonstrates the new UI kit using components like `af-ui-button`, `af-ui-card`, `af-ui-input`, `af-ui-badge`, and `af-ui-switch` in a Shadow DOM-friendly workflow.
 
+All `af-`, `af-ui-`, and `af-dashboard-` components are distributed together in the same `@africode/core` package, so they share theme, styles, registry, and versioning.
+
 The library is optimized for consistent spacing, elevation, and interactive states across theme-aware apps.
 
 Use the Tailwind starter template for a ready-made UI experience:

package/components/breadcrumb.js

@@ -0,0 +1,72 @@
+/**
+ * AfriCode Breadcrumb Component
+ *
+ * Simple breadcrumb trail for website navigation.
+ * @module components/breadcrumb
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriBreadcrumb extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['separator'];
+  }
+
+  constructor() {
+    super();
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const separator = this.getAttribute('separator') || '/';
+
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host {
+          display: block;
+          font-family: 'Inter', system-ui, sans-serif;
+          color: #475569;
+          font-size: 0.9rem;
+        }
+
+        nav {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.5rem;
+          align-items: center;
+        }
+
+        .crumb {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.35rem;
+        }
+
+        .separator {
+          color: #cbd5e1;
+        }
+
+        ::slotted(a) {
+          color: #0f172a;
+          text-decoration: none;
+          font-weight: 600;
+        }
+
+        ::slotted(a:hover) {
+          text-decoration: underline;
+        }
+      </style>
+
+      <nav aria-label="Breadcrumb">
+        <slot></slot>
+      </nav>
+    `;
+  }
+}
+
+registerComponent('af-breadcrumb', AfriBreadcrumb);
+export default AfriBreadcrumb;

package/components/carousel.js

@@ -0,0 +1,32 @@
+/**
+ * AfriCode Carousel
+ *
+ * Minimal image/content carousel with navigation.
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriCarousel extends AfriCodeComponent {
+  constructor(){ super(); this._idx=0; this.render(); }
+  connectedCallback(){ this._bind(); }
+  _bind(){ this.shadowRoot.addEventListener('click', (e)=>{ const t=e.target; if(t.matches('.next')){this.next();} if(t.matches('.prev')){this.prev();}}); }
+  next(){ const items=this.shadowRoot.querySelectorAll('.slide'); if(items.length===0) return; items[this._idx].classList.remove('active'); this._idx=(this._idx+1)%items.length; items[this._idx].classList.add('active'); }
+  prev(){ const items=this.shadowRoot.querySelectorAll('.slide'); if(items.length===0) return; items[this._idx].classList.remove('active'); this._idx=(this._idx-1+items.length)%items.length; items[this._idx].classList.add('active'); }
+  render(){ this.shadowRoot.innerHTML = html`
+    <style>
+      :host{display:block;position:relative;overflow:hidden}
+      .slides{display:flex}
+      .slide{min-width:100%;transition:transform 300ms ease;display:none}
+      .slide.active{display:block}
+      .nav{position:absolute;top:50%;transform:translateY(-50%);width:100%;display:flex;justify-content:space-between;padding:0 1rem}
+      .btn{background:rgba(0,0,0,0.4);border:none;color:white;padding:0.5rem 0.7rem;border-radius:8px;cursor:pointer}
+    </style>
+    <div class="viewport">
+      <slot></slot>
+    </div>
+    <div class="nav"><button class="btn prev">‹</button><button class="btn next">›</button></div>
+  `; }
+}
+
+registerComponent('af-carousel', AfriCarousel);
+export default AfriCarousel;

package/components/cart-drawer.js

@@ -0,0 +1,28 @@
+/**
+ * AfriCode Cart Drawer
+ *
+ * A slide-over cart drawer for e-commerce flows.
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriCartDrawer extends AfriCodeComponent {
+  constructor(){ super(); this.open=false; this.render(); }
+  connectedCallback(){ this.shadowRoot.addEventListener('click',(e)=>{ if(e.target.matches('.close')) this.close() }) }
+  openDrawer(){ this.open=true; this.render(); }
+  close(){ this.open=false; this.render(); }
+  render(){ this.shadowRoot.innerHTML = html`
+    <style>
+      :host{display:block}
+      .backdrop{position:fixed;inset:0;background:rgba(2,6,23,0.5);display:${this.open?'block':'none'};z-index:1200}
+      .drawer{position:fixed;right:0;top:0;height:100vh;width:360px;background:#fff;box-shadow:-20px 0 40px rgba(2,6,23,0.2);transform:translateX(${this.open?'0':'100%'});transition:transform 300ms}
+      .header{padding:16px;display:flex;justify-content:space-between;align-items:center}
+      .items{padding:16px;display:grid;gap:12px;overflow:auto;height:calc(100vh - 160px)}
+      .footer{padding:16px;border-top:1px solid #eef2f7}
+    </style>
+    <div class="backdrop"><div class="drawer"><div class="header"><strong>Cart</strong><button class="close">✕</button></div><div class="items"><slot></slot></div><div class="footer"><button class="checkout">Checkout</button></div></div></div>
+  `; this.shadowRoot.querySelector('.checkout')?.addEventListener('click',()=>this.emit('checkout')) }
+}
+
+registerComponent('af-cart-drawer', AfriCartDrawer);
+export default AfriCartDrawer;

package/components/code-block.js

@@ -0,0 +1,20 @@
+/**
+ * AfriCode Code Block
+ *
+ * Syntax-highlighted code block wrapper (lightweight).
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriCodeBlock extends AfriCodeComponent {
+  constructor(){ super(); this.render(); }
+  render(){ this.shadowRoot.innerHTML = html`
+    <style>
+      pre{background:#0f172a;color:#e6eef8;padding:12px;border-radius:8px;overflow:auto}
+    </style>
+    <pre><code><slot></slot></code></pre>
+  ` }
+}
+
+registerComponent('af-code-block', AfriCodeBlock);
+export default AfriCodeBlock;

package/components/contact-form.js

@@ -0,0 +1,25 @@
+/**
+ * AfriCode Contact Form
+ *
+ * Ready-to-use contact form with basic validation.
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriContactForm extends AfriCodeComponent {
+  constructor(){ super(); this.render(); }
+  connectedCallback(){ this.shadowRoot.addEventListener('submit',(e)=>{ if(e.target.matches('form')) this._onSubmit(e) }, true); }
+  async _onSubmit(e){ e.preventDefault(); const data=new FormData(e.target); this.emit('submit', Object.fromEntries(data.entries())); }
+  render(){ this.shadowRoot.innerHTML = html`
+    <style>
+      :host{display:block}
+      form{display:grid;gap:8px}
+      input,textarea{padding:10px;border-radius:8px;border:1px solid #e5e7eb}
+      button{padding:10px;border-radius:8px;background:#1EB53A;color:white;border:none}
+    </style>
+    <form><input name="name" placeholder="Name" required/><input name="email" placeholder="Email" type="email" required/><textarea name="message" placeholder="Message" rows="4" required></textarea><button type="submit">Send</button></form>
+  `}
+}
+
+registerComponent('af-contact-form', AfriContactForm);
+export default AfriContactForm;

package/components/cookie-consent.js

@@ -0,0 +1,23 @@
+/**
+ * AfriCode Cookie Consent
+ *
+ * Simple cookie consent bar.
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriCookieConsent extends AfriCodeComponent {
+  constructor(){ super(); this.visible=!localStorage.getItem('af_cookie'); this.render(); }
+  connectedCallback(){ this.shadowRoot.addEventListener('click',(e)=>{ if(e.target.matches('.accept')){ localStorage.setItem('af_cookie','1'); this.visible=false; this.render(); this.emit('consent', {accepted:true}) }}) }
+  render(){ this.shadowRoot.innerHTML = html`
+    <style>
+      :host{display:block}
+      .bar{position:fixed;left:16px;right:16px;bottom:16px;padding:12px;border-radius:12px;background:#111;color:#fff;display:${this.visible?'flex':'none'};justify-content:space-between;align-items:center;gap:12px}
+      button{background:#1EB53A;border:none;padding:8px 12px;border-radius:8px;color:#fff}
+    </style>
+    <div class="bar"><div>We use cookies to improve your experience.</div><div><button class="accept">Accept</button></div></div>
+  ` }
+}
+
+registerComponent('af-cookie-consent', AfriCookieConsent);
+export default AfriCookieConsent;

package/components/cta-banner.js

@@ -0,0 +1,38 @@
+/**
+ * AfriCode CTA Banner
+ *
+ * Simple call-to-action banner for marketing pages.
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriCTABanner extends AfriCodeComponent {
+  static get observedAttributes() { return ['title','subtitle','cta-text']; }
+  constructor(){ super(); this.render(); }
+  attributeChangedCallback(){ this.render(); }
+  render(){
+    const title = this.getAttribute('title') || 'Get started today';
+    const subtitle = this.getAttribute('subtitle') || '';
+    const cta = this.getAttribute('cta-text') || 'Try for free';
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host{display:block;font-family:Inter,system-ui,sans-serif}
+        .banner{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:1.25rem;border-radius:12px;background:linear-gradient(90deg,#1EB53A,#FCD116);color:#08111a}
+        .text{display:flex;flex-direction:column}
+        .title{font-weight:800;font-size:1.125rem}
+        .subtitle{font-size:0.95rem;color:rgba(8,17,26,0.8)}
+        .cta{background:rgba(255,255,255,0.12);border:none;padding:0.6rem 1rem;border-radius:8px;color:inherit;cursor:pointer}
+      </style>
+      <div class="banner">
+        <div class="text">
+          <div class="title">${title}</div>
+          ${subtitle?html`<div class="subtitle">${subtitle}</div>`:''}
+        </div>
+        <button class="cta">${cta}</button>
+      </div>
+    `;
+  }
+}
+
+registerComponent('af-cta-banner', AfriCTABanner);
+export default AfriCTABanner;

package/components/dashboard-activity-list.js

@@ -0,0 +1,103 @@
+/**
+ * AfriCode Dashboard Activity List
+ *
+ * Displays recent activity or event history in a dashboard card.
+ * @module components/dashboard-activity-list
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriDashboardActivityList extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['title', 'empty-text'];
+  }
+
+  constructor() {
+    super();
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const title = this.getAttribute('title') || 'Recent Activity';
+    const emptyText = this.getAttribute('empty-text') || 'No recent activity available.';
+
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host {
+          display: block;
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .activity-card {
+          display: grid;
+          gap: 1rem;
+          padding: 1.5rem;
+          border-radius: 24px;
+          background: #ffffff;
+          border: 1px solid rgba(15, 23, 42, 0.08);
+        }
+
+        .header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+        }
+
+        .title {
+          margin: 0;
+          font-size: 1rem;
+          font-weight: 700;
+          color: #0f172a;
+        }
+
+        .list {
+          display: grid;
+          gap: 0.5rem;
+        }
+
+        .item {
+          padding: 0.95rem 1rem;
+          border-radius: 18px;
+          background: #f8fafc;
+          border: 1px solid rgba(15, 23, 42, 0.04);
+        }
+
+        .item-title {
+          font-size: 0.95rem;
+          font-weight: 600;
+          color: #0f172a;
+          margin: 0 0 0.25rem;
+        }
+
+        .item-meta {
+          margin: 0;
+          color: #6b7280;
+          font-size: 0.85rem;
+        }
+
+        .empty {
+          color: #6b7280;
+          font-size: 0.95rem;
+          padding: 1rem 0;
+        }
+      </style>
+
+      <div class="activity-card">
+        <div class="header"><h3 class="title">${title}</h3></div>
+        <div class="list">
+          <slot>
+            <div class="empty">${emptyText}</div>
+          </slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+registerComponent('af-dashboard-activity-list', AfriDashboardActivityList);
+export default AfriDashboardActivityList;

package/components/dashboard-card.js

@@ -0,0 +1,85 @@
+/**
+ * AfriCode Dashboard Card
+ *
+ * A reusable dashboard surface for metrics, lists, and analytics.
+ * @module components/dashboard-card
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriDashboardCard extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['title', 'variant'];
+  }
+
+  constructor() {
+    super();
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const title = this.getAttribute('title') || '';
+    const variant = this.getAttribute('variant') || 'surface';
+
+    const styles = {
+      surface: {
+        background: '#ffffff',
+        border: '1px solid rgba(15, 23, 42, 0.08)',
+        shadow: '0 18px 36px rgba(15, 23, 42, 0.04)'
+      },
+      elevated: {
+        background: 'linear-gradient(180deg, #ffffff 0%, #f8fafc 100%)',
+        border: '1px solid rgba(15, 23, 42, 0.12)',
+        shadow: '0 24px 48px rgba(15, 23, 42, 0.08)'
+      }
+    };
+
+    const cardStyle = styles[variant] || styles.surface;
+
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host {
+          display: block;
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .card {
+          background: ${cardStyle.background};
+          border: ${cardStyle.border};
+          border-radius: 24px;
+          box-shadow: ${cardStyle.shadow};
+          padding: 1.5rem;
+          min-height: 100px;
+          overflow: hidden;
+        }
+
+        .header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+          margin-bottom: 1rem;
+        }
+
+        .title {
+          margin: 0;
+          font-size: 1rem;
+          font-weight: 700;
+          color: #0f172a;
+        }
+      </style>
+
+      <div class="card">
+        ${title ? html`<div class="header"><h3 class="title">${title}</h3><slot name="header"></slot></div>` : ''}
+        <div class="body"><slot></slot></div>
+      </div>
+    `;
+  }
+}
+
+registerComponent('af-dashboard-card', AfriDashboardCard);
+export default AfriDashboardCard;

package/components/dashboard-metric.js

@@ -0,0 +1,81 @@
+/**
+ * AfriCode Dashboard Metric
+ *
+ * Summary tile for key performance indicators.
+ * @module components/dashboard-metric
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriDashboardMetric extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['label', 'value', 'delta', 'trend'];
+  }
+
+  constructor() {
+    super();
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const label = this.getAttribute('label') || 'Metric';
+    const value = this.getAttribute('value') || '0';
+    const delta = this.getAttribute('delta') || '';
+    const trend = this.getAttribute('trend') || 'neutral';
+    const trendColor = trend === 'positive' ? '#16a34a' : trend === 'negative' ? '#dc2626' : '#475569';
+
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host {
+          display: block;
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .metric {
+          display: grid;
+          gap: 0.5rem;
+          padding: 1.25rem;
+          border-radius: 24px;
+          background: #ffffff;
+          border: 1px solid rgba(15, 23, 42, 0.08);
+        }
+
+        .label {
+          color: #6b7280;
+          text-transform: uppercase;
+          letter-spacing: 0.14em;
+          font-size: 0.75rem;
+          font-weight: 700;
+        }
+
+        .value {
+          font-size: 2rem;
+          font-weight: 800;
+          color: #0f172a;
+        }
+
+        .delta {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.4rem;
+          font-weight: 700;
+          color: ${trendColor};
+          font-size: 0.92rem;
+        }
+      </style>
+
+      <div class="metric">
+        <div class="label">${label}</div>
+        <div class="value">${value}</div>
+        ${delta ? html`<div class="delta">${delta}</div>` : ''}
+      </div>
+    `;
+  }
+}
+
+registerComponent('af-dashboard-metric', AfriDashboardMetric);
+export default AfriDashboardMetric;

package/components/dashboard-shell.js

@@ -0,0 +1,85 @@
+/**
+ * AfriCode Dashboard Shell
+ *
+ * A layout container for dashboard applications.
+ * Use slots for sidebar, topbar, and page content.
+ * @module components/dashboard-shell
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriDashboardShell extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['sidebar-width', 'topbar-height'];
+  }
+
+  constructor() {
+    super();
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const sidebarWidth = this.getAttribute('sidebar-width') || '280px';
+    const topbarHeight = this.getAttribute('topbar-height') || '72px';
+
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host {
+          display: block;
+          min-height: 100vh;
+          font-family: 'Inter', system-ui, sans-serif;
+          color: var(--af-text, #0f172a);
+          background: var(--af-bg, #f8fafc);
+        }
+
+        .dashboard-shell {
+          display: grid;
+          grid-template-columns: ${sidebarWidth} minmax(0, 1fr);
+          grid-template-rows: ${topbarHeight} minmax(0, 1fr);
+          min-height: 100vh;
+          gap: 1rem;
+        }
+
+        .sidebar {
+          grid-row: 1 / span 2;
+          background: transparent;
+        }
+
+        .topbar {
+          grid-column: 2 / 3;
+          position: sticky;
+          top: 0;
+          z-index: 10;
+          background: var(--af-surface, #ffffff);
+          border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+          box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
+        }
+
+        .content {
+          grid-column: 2 / 3;
+          padding: 24px;
+          min-height: calc(100vh - ${topbarHeight});
+          background: transparent;
+          overflow: hidden;
+        }
+
+        ::slotted([slot="sidebar"]) {
+          height: 100%;
+        }
+      </style>
+
+      <div class="dashboard-shell">
+        <aside class="sidebar"><slot name="sidebar"></slot></aside>
+        <header class="topbar"><slot name="topbar"></slot></header>
+        <main class="content"><slot></slot></main>
+      </div>
+    `;
+  }
+}
+
+registerComponent('af-dashboard-shell', AfriDashboardShell);
+export default AfriDashboardShell;