@africode/core 5.0.0

package/components/card.js

@@ -0,0 +1,137 @@
+/**
+ * AfriCode Simple Card Component
+ * 
+ * Versatile content card for various use cases.
+ * Suitable for: Product cards, Blog posts, Team members, Stats
+ * 
+ * @module components/card
+ */
+
+import { AfriCodeComponent, registerComponent } from './base.js';
+
+export class AfriCard extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['theme', 'variant', 'clickable', 'image'];
+  }
+
+  constructor() {
+    super();
+    this.render();
+  }
+
+  connectedCallback() {
+    if (this.hasAttribute('clickable')) {
+      this.shadowRoot.querySelector('.card').addEventListener('click', () => {
+        this.emit('af-click');
+      });
+    }
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const theme = this.getAttribute('theme') || 'default';
+    const variant = this.getAttribute('variant') || 'elevated';
+    const clickable = this.hasAttribute('clickable');
+    const image = this.getAttribute('image');
+
+    const themes = {
+      default: { accent: '#333', border: '#eee' },
+      tanzania: { accent: '#1EB53A', border: '#1EB53A' },
+      maasai: { accent: '#FF0000', border: '#8B0000' },
+      ndebele: { accent: '#4169E1', border: '#4169E1' }
+    };
+    const t = themes[theme] || themes.default;
+
+    const variants = {
+      elevated: 'box-shadow: 0 2px 12px rgba(0,0,0,0.1);',
+      outlined: `border: 2px solid ${t.border};`,
+      flat: 'background: #f8f9fa;'
+    };
+
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host {
+          display: block;
+          font-family: var(--font-body, 'Inter', sans-serif);
+        }
+
+        .card {
+          background: var(--glass-bg, rgba(15, 23, 42, 0.7));
+          backdrop-filter: blur(var(--glass-blur, 12px));
+          border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
+          border-radius: var(--radius-lg, 16px);
+          overflow: hidden;
+          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+          position: relative;
+          ${clickable ? 'cursor: pointer;' : ''}
+        }
+
+        .card::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background: radial-gradient(circle at top left, rgba(255,255,255,0.05), transparent);
+          pointer-events: none;
+        }
+
+        ${clickable ? `
+          .card:hover {
+            transform: translateY(-8px);
+            border-color: rgba(252, 209, 22, 0.4);
+            box-shadow: 0 20px 40px rgba(0,0,0,0.4);
+          }
+        ` : ''}
+
+        .card-image {
+          width: 100%;
+          height: 200px;
+          object-fit: cover;
+          border-bottom: 1px solid var(--glass-border);
+        }
+
+        .card-body {
+          padding: 32px;
+        }
+
+        ::slotted(h1), ::slotted(h2), ::slotted(h3), ::slotted(h4) {
+          margin: 0 0 12px 0;
+          font-family: 'Outfit', sans-serif;
+          font-weight: 700;
+          color: var(--text-primary, #fff);
+          letter-spacing: -0.02em;
+        }
+
+        ::slotted(p) {
+          margin: 0;
+          color: var(--text-muted, #94a3b8);
+          line-height: 1.6;
+          font-size: 0.95rem;
+        }
+
+        .card-footer {
+          padding: 20px 32px;
+          background: rgba(0,0,0,0.2);
+          border-top: 1px solid var(--glass-border);
+        }
+      </style>
+
+      <article class="card">
+        ${image ? `<img class="card-image" src="${image}" alt="" />` : ''}
+        <div class="card-body">
+          <slot></slot>
+        </div>
+        ${this.querySelector('[slot="footer"]') ? `
+          <div class="card-footer">
+            <slot name="footer"></slot>
+          </div>
+        ` : ''}
+      </article>
+    `;
+  }
+}
+
+registerComponent('af-card', AfriCard);
+export default AfriCard;

package/components/cultural-card.js

@@ -0,0 +1,243 @@
+/**
+ * AfriCode Cultural Card Component
+ * 
+ * Interactive card showcasing African cultural patterns
+ * with region selection and animated pattern backgrounds.
+ * 
+ * @module components/cultural-card
+ */
+
+import { AfriCodeComponent, registerComponent } from './base.js';
+import patterns from '../core/patterns.js';
+
+export class CulturalCard extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['culture', 'interactive'];
+  }
+
+  constructor() {
+    super();
+    this._cultures = {
+      // East Africa
+      maasai: { name: 'Maasai', region: 'Tanzania/Kenya', pattern: 'generateShuka', colors: { primary: '#FF0000', accent: '#000000' } },
+      hadzabe: { name: 'Hadzabe', region: 'Tanzania', pattern: 'generateHadzabe', colors: { primary: '#8B4513', accent: '#CD853F' } },
+      swahili: { name: 'Swahili', region: 'East Africa', pattern: 'generateKangaBorder', colors: { primary: '#1EB53A', accent: '#FCD116' } },
+      kitenge: { name: 'Kitenge', region: 'East Africa', pattern: 'generateKitenge', colors: { primary: '#00A3DD', accent: '#1EB53A' } },
+      tibeb: { name: 'Tibeb', region: 'Ethiopia', pattern: 'generateTibeb', colors: { primary: '#009E60', accent: '#FCDD09' } },
+      // West Africa
+      ashanti: { name: 'Ashanti/Akan', region: 'Ghana', pattern: 'generateKente', colors: { primary: '#FFD700', accent: '#228B22' } },
+      adinkra: { name: 'Adinkra', region: 'Ghana', pattern: 'generateAdinkra', colors: { primary: '#000000', accent: '#CD853F' } },
+      bogolan: { name: 'Bogolan', region: 'Mali', pattern: 'generateBogolan', colors: { primary: '#3E2723', accent: '#D7CCC8' } },
+      yoruba: { name: 'Yoruba', region: 'Nigeria', pattern: 'generateAsoOke', colors: { primary: '#4B0082', accent: '#FFD700' } },
+      ankara: { name: 'Ankara', region: 'West Africa', pattern: 'generateAnkara', colors: { primary: '#FF6B00', accent: '#00A86B' } },
+      // Central Africa
+      kuba: { name: 'Kuba Shoowa', region: 'DRC', pattern: 'generateKuba', colors: { primary: '#D2B48C', accent: '#3E2723' } },
+      imigongo: { name: 'Imigongo', region: 'Rwanda', pattern: 'generateImigongo', colors: { primary: '#000000', accent: '#B22222' } },
+      // Southern Africa
+      ndebele: { name: 'Ndebele', region: 'South Africa', pattern: 'generateNdebele', colors: { primary: '#4169E1', accent: '#FFD700' } },
+      zulu: { name: 'Zulu', region: 'South Africa', pattern: 'generateZulu', colors: { primary: '#FF0000', accent: '#000000' } },
+      swazi: { name: 'Swazi', region: 'Eswatini', pattern: 'generateSwazi', colors: { primary: '#3E5EB9', accent: '#FECD00' } },
+      xhosa: { name: 'Xhosa', region: 'South Africa', pattern: 'generateXhosa', colors: { primary: '#00A86B', accent: '#1a1a2e' } }
+    };
+    this.render();
+  }
+
+  connectedCallback() {
+    this._setupInteraction();
+  }
+
+  _setupInteraction() {
+    if (!this.hasAttribute('interactive')) {return;}
+
+    const selector = this.shadowRoot.querySelector('.culture-selector');
+    selector?.addEventListener('change', (e) => {
+      this.setAttribute('culture', e.target.value);
+      this.emit('af-culture-change', { culture: e.target.value });
+    });
+  }
+
+  attributeChangedCallback() {
+    this.render();
+    this._setupInteraction();
+  }
+
+  render() {
+    const cultureKey = this.getAttribute('culture') || 'maasai';
+    const interactive = this.hasAttribute('interactive');
+    const culture = this._cultures[cultureKey] || this._cultures.maasai;
+
+    // Generate pattern
+    const patternFn = patterns[culture.pattern];
+    const patternUrl = patternFn ? patternFn() : '';
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .cultural-card {
+          border-radius: 12px;
+          overflow: hidden;
+          box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+          transition: transform 300ms ease, box-shadow 300ms ease;
+        }
+
+        .cultural-card:hover {
+          transform: translateY(-5px);
+          box-shadow: 0 8px 30px rgba(0,0,0,0.2);
+        }
+
+        .pattern-header {
+          height: 120px;
+          background-image: url("${patternUrl}");
+          background-repeat: repeat;
+          position: relative;
+          animation: patternShift 20s linear infinite;
+        }
+
+        @keyframes patternShift {
+          0% { background-position: 0 0; }
+          100% { background-position: 100px 100px; }
+        }
+
+        .pattern-overlay {
+          position: absolute;
+          inset: 0;
+          background: linear-gradient(transparent 0%, rgba(0,0,0,0.3) 100%);
+        }
+
+        .culture-badge {
+          position: absolute;
+          bottom: 10px;
+          left: 10px;
+          background: ${culture.colors.primary};
+          color: white;
+          padding: 4px 12px;
+          border-radius: 20px;
+          font-size: 12px;
+          font-weight: 600;
+          text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+        }
+
+        .region-badge {
+          position: absolute;
+          bottom: 10px;
+          right: 10px;
+          background: rgba(255,255,255,0.9);
+          color: #333;
+          padding: 4px 10px;
+          border-radius: 20px;
+          font-size: 11px;
+        }
+
+        .card-body {
+          background: white;
+          padding: 20px;
+        }
+
+        .card-title {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+          margin-bottom: 12px;
+        }
+
+        .card-title h3 {
+          margin: 0;
+          font-size: 18px;
+          color: ${culture.colors.primary};
+        }
+
+        .culture-icon {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          background-image: url("${patternUrl}");
+          background-size: cover;
+          border: 2px solid ${culture.colors.accent};
+        }
+
+        .card-content {
+          color: #555;
+          line-height: 1.6;
+        }
+
+        .culture-selector {
+          width: 100%;
+          padding: 10px;
+          margin-top: 15px;
+          border: 2px solid ${culture.colors.primary};
+          border-radius: 6px;
+          font-family: inherit;
+          font-size: 14px;
+          cursor: pointer;
+          background: white;
+        }
+
+        .culture-selector:focus {
+          outline: none;
+          box-shadow: 0 0 0 3px ${culture.colors.primary}30;
+        }
+
+        select option {
+          padding: 8px;
+        }
+
+        optgroup {
+          font-weight: 600;
+          color: #333;
+        }
+      </style>
+
+      <article class="cultural-card">
+        <div class="pattern-header">
+          <div class="pattern-overlay"></div>
+          <span class="culture-badge">${culture.name}</span>
+          <span class="region-badge">📍 ${culture.region}</span>
+        </div>
+        <div class="card-body">
+          <div class="card-title">
+            <div class="culture-icon"></div>
+            <h3>${culture.name} Pattern</h3>
+          </div>
+          <div class="card-content">
+            <slot></slot>
+          </div>
+          ${interactive ? `
+            <select class="culture-selector">
+              <optgroup label="🌍 East Africa">
+                <option value="maasai" ${cultureKey === 'maasai' ? 'selected' : ''}>Maasai (Tanzania/Kenya)</option>
+                <option value="hadzabe" ${cultureKey === 'hadzabe' ? 'selected' : ''}>Hadzabe (Tanzania)</option>
+                <option value="swahili" ${cultureKey === 'swahili' ? 'selected' : ''}>Swahili Kanga</option>
+                <option value="kitenge" ${cultureKey === 'kitenge' ? 'selected' : ''}>Kitenge</option>
+                <option value="tibeb" ${cultureKey === 'tibeb' ? 'selected' : ''}>Ethiopian Tibeb</option>
+              </optgroup>
+              <optgroup label="🌍 West Africa">
+                <option value="ashanti" ${cultureKey === 'ashanti' ? 'selected' : ''}>Ashanti Kente (Ghana)</option>
+                <option value="adinkra" ${cultureKey === 'adinkra' ? 'selected' : ''}>Adinkra (Ghana)</option>
+                <option value="bogolan" ${cultureKey === 'bogolan' ? 'selected' : ''}>Mali Bogolan (Mud Cloth)</option>
+                <option value="yoruba" ${cultureKey === 'yoruba' ? 'selected' : ''}>Yoruba Aso-Oke (Nigeria)</option>
+                <option value="ankara" ${cultureKey === 'ankara' ? 'selected' : ''}>Ankara Wax Print</option>
+              </optgroup>
+              <optgroup label="🌍 Central Africa">
+                <option value="kuba" ${cultureKey === 'kuba' ? 'selected' : ''}>Kuba Shoowa (DRC)</option>
+                <option value="imigongo" ${cultureKey === 'imigongo' ? 'selected' : ''}>Imigongo (Rwanda)</option>
+              </optgroup>
+              <optgroup label="🌍 Southern Africa">
+                <option value="ndebele" ${cultureKey === 'ndebele' ? 'selected' : ''}>Ndebele (South Africa)</option>
+                <option value="zulu" ${cultureKey === 'zulu' ? 'selected' : ''}>Zulu (South Africa)</option>
+                <option value="swazi" ${cultureKey === 'swazi' ? 'selected' : ''}>Swazi (Eswatini)</option>
+                <option value="xhosa" ${cultureKey === 'xhosa' ? 'selected' : ''}>Xhosa (South Africa)</option>
+              </optgroup>
+            </select>
+          ` : ''}
+        </div>
+      </article>
+    `;
+  }
+}
+
+registerComponent('af-cultural-card', CulturalCard);
+export default CulturalCard;

package/components/divider.js

@@ -0,0 +1,83 @@
+/**
+ * AfriCode Section Divider Component
+ * 
+ * Patterned SVG dividers for separating content sections using African motifs.
+ * Supports patterns: zigzag, waves, diamonds, triangles.
+ * 
+ * @module components/divider
+ */
+
+import { AfriCodeComponent, registerComponent } from './base.js';
+
+export class AfriDivider extends AfriCodeComponent {
+    static get observedAttributes() {
+        return ['pattern', 'height', 'color', 'flip'];
+    }
+
+    constructor() {
+        super();
+        this.render();
+    }
+
+    attributeChangedCallback() {
+        this.render();
+    }
+
+    _getPatternPath(pattern, width, height) {
+        const p = pattern || 'zigzag';
+
+        switch (p) {
+            case 'zigzag':
+                // Continuous zigzag
+                return `M0,${height} L${width / 4},0 L${width / 2},${height} L${width * 0.75},0 L${width},${height} V${height + 10} H0 Z`;
+            case 'waves':
+                // Smooth sine wave
+                return `M0,${height / 2} Q${width / 4},0 ${width / 2},${height / 2} T${width},${height / 2} V${height} H0 Z`;
+            case 'triangles':
+                // Repeating triangles
+                return `M0,${height} L${width / 8},0 L${width / 4},${height} L${width * 0.375},0 L${width / 2},${height} 
+                L${width * 0.625},0 L${width * 0.75},${height} L${width * 0.875},0 L${width},${height} V${height + 10} H0 Z`;
+            case 'diamonds':
+                // Row of diamonds on bottom
+                return `M0,0 H${width} V${height / 2} 
+                L${width * 0.9},${height} L${width * 0.8},${height / 2} 
+                L${width * 0.7},${height} L${width * 0.6},${height / 2} 
+                L${width * 0.5},${height} L${width * 0.4},${height / 2} 
+                L${width * 0.3},${height} L${width * 0.2},${height / 2} 
+                L${width * 0.1},${height} L0,${height / 2} Z`;
+            default:
+                return `M0,0 H${width} V${height} H0 Z`; // Rectangle fallback
+        }
+    }
+
+    render() {
+        const pattern = this.getAttribute('pattern') || 'zigzag';
+        const height = this.getAttribute('height') || '50';
+        const color = this.getAttribute('color') || 'currentColor';
+        const flip = this.hasAttribute('flip');
+
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          line-height: 0;
+          width: 100%;
+          overflow: hidden;
+          color: ${color};
+        }
+        svg {
+          display: block;
+          width: 100%;
+          height: ${height}px;
+          ${flip ? 'transform: rotate(180deg);' : ''}
+        }
+      </style>
+      <svg viewBox="0 0 100 ${height}" preserveAspectRatio="none">
+        <path d="${this._getPatternPath(pattern, 100, parseInt(height))}" fill="currentColor" />
+      </svg>
+    `;
+    }
+}
+
+registerComponent('af-divider', AfriDivider);
+export default AfriDivider;

package/components/dropdown.js

@@ -0,0 +1,171 @@
+/**
+ * AfriCode Dropdown Component
+ * 
+ * Dropdown menu with keyboard navigation.
+ * 
+ * @module components/dropdown
+ */
+
+import { AfriCodeComponent, registerComponent } from './base.js';
+
+export class AfriDropdown extends AfriCodeComponent {
+    static get observedAttributes() {
+        return ['label', 'open'];
+    }
+
+    constructor() {
+        super();
+        this._open = false;
+        this.render();
+    }
+
+    toggle() {
+        this._open = !this._open;
+        if (this._open) {
+            this.setAttribute('open', '');
+        } else {
+            this.removeAttribute('open');
+        }
+        this.render();
+    }
+
+    close() {
+        this._open = false;
+        this.removeAttribute('open');
+        this.render();
+    }
+
+    connectedCallback() {
+        // Close on outside click
+        document.addEventListener('click', (e) => {
+            if (!this.contains(e.target)) {
+                this.close();
+            }
+        });
+
+        // Keyboard navigation
+        this.addEventListener('keydown', this._handleKeydown.bind(this));
+    }
+
+    _handleKeydown(e) {
+        const trigger = this.shadowRoot.getElementById('trigger');
+        
+        switch (e.key) {
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                this.toggle();
+                break;
+            case 'Escape':
+                if (this._open) {
+                    e.preventDefault();
+                    this.close();
+                    trigger.focus();
+                }
+                break;
+            case 'ArrowDown':
+                if (!this._open) {
+                    e.preventDefault();
+                    this.toggle();
+                }
+                break;
+        }
+    }
+
+    render() {
+        const label = this.getAttribute('label') || 'Menu';
+        const open = this.hasAttribute('open');
+
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-block;
+          position: relative;
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .dropdown-trigger {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 10px 16px;
+          background: #1e1e1e;
+          border: 1px solid #2a2a2a;
+          border-radius: 8px;
+          color: #ffffff;
+          font-size: 0.9rem;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+
+        .dropdown-trigger:hover {
+          border-color: #1EB53A;
+        }
+
+        .dropdown-arrow {
+          transition: transform 0.2s;
+          ${open ? 'transform: rotate(180deg);' : ''}
+        }
+
+        .dropdown-menu {
+          position: absolute;
+          top: 100%;
+          left: 0;
+          min-width: 180px;
+          margin-top: 4px;
+          background: #121212;
+          border: 1px solid #1e1e1e;
+          border-radius: 8px;
+          box-shadow: 0 10px 40px rgba(0,0,0,0.5);
+          opacity: ${open ? 1 : 0};
+          visibility: ${open ? 'visible' : 'hidden'};
+          transform: translateY(${open ? 0 : '-10px'});
+          transition: all 0.2s ease;
+          z-index: 1000;
+          overflow: hidden;
+        }
+
+        ::slotted(a), ::slotted(button), ::slotted(div) {
+          display: block;
+          padding: 12px 16px;
+          color: #a0a0a0;
+          text-decoration: none;
+          border: none;
+          background: none;
+          width: 100%;
+          text-align: left;
+          font-size: 0.9rem;
+          cursor: pointer;
+          transition: all 0.15s;
+        }
+
+        ::slotted(a:hover), ::slotted(button:hover), ::slotted(div:hover) {
+          background: #1e1e1e;
+          color: #1EB53A;
+        }
+
+        ::slotted(hr) {
+          border: none;
+          border-top: 1px solid #1e1e1e;
+          margin: 4px 0;
+        }
+      </style>
+
+      <button class="dropdown-trigger" id="trigger" aria-expanded="${open}" aria-haspopup="menu">
+        ${label}
+        <span class="dropdown-arrow" aria-hidden="true">▼</span>
+      </button>
+      <div class="dropdown-menu" role="menu" ${open ? '' : 'aria-hidden="true"'}>
+        <slot></slot>
+      </div>
+    `;
+
+        this.shadowRoot.getElementById('trigger').addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.toggle();
+        });
+    }
+}
+
+registerComponent('af-dropdown', AfriDropdown);
+export default AfriDropdown;