@africode/core 5.0.1 → 5.0.2

package/COMPONENT_SCHEMA.json

@@ -1,9 +1,10 @@
 {
   "version": "5.0.0",
-  "timestamp": "2026-05-02T15:31:51.816Z",
+  "timestamp": "2026-05-03T12:18:29.985Z",
   "components": [
     {
-      "tagName": "af-components\\accordion",
+      "tagName": "af-accordion",
+      "className": "AfriAccordion",
       "filePath": "components\\accordion.js",
       "slots": [
         "default"
@@ -18,11 +19,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\accordion></af-components\\accordion>",
+      "example": "<af-accordion></af-accordion>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\alert",
+      "tagName": "af-alert",
+      "className": "AfriAlert",
       "filePath": "components\\alert.js",
       "slots": [
         "default"
@@ -40,11 +42,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\alert></af-components\\alert>",
+      "example": "<af-alert></af-alert>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\auth",
+      "tagName": "af-auth",
+      "className": "AfriAuth",
       "filePath": "components\\auth.js",
       "slots": [
         "default"
@@ -52,11 +55,12 @@
       "attributes": {},
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\auth></af-components\\auth>",
+      "example": "<af-auth></af-auth>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\avatar",
+      "tagName": "af-avatar",
+      "className": "AfriAvatar",
       "filePath": "components\\avatar.js",
       "slots": [
         "default"
@@ -80,11 +84,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\avatar></af-components\\avatar>",
+      "example": "<af-avatar></af-avatar>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\badge",
+      "tagName": "af-badge",
+      "className": "AfriBadge",
       "filePath": "components\\badge.js",
       "slots": [
         "default"
@@ -102,11 +107,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\badge></af-components\\badge>",
+      "example": "<af-badge></af-badge>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\button",
+      "tagName": "af-button",
+      "className": "AfriButton",
       "filePath": "components\\button.js",
       "slots": [
         "default"
@@ -143,11 +149,12 @@
         }
       ],
       "cssCustomProperties": [],
-      "example": "<af-components\\button></af-components\\button>",
+      "example": "<af-button></af-button>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\card",
+      "tagName": "af-card",
+      "className": "AfriCard",
       "filePath": "components\\card.js",
       "slots": [
         "default"
@@ -168,11 +175,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\card></af-components\\card>",
+      "example": "<af-card></af-card>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\cultural-card",
+      "tagName": "af-cultural-card",
+      "className": "CulturalCard",
       "filePath": "components\\cultural-card.js",
       "slots": [
         "default"
@@ -187,11 +195,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\cultural-card></af-components\\cultural-card>",
+      "example": "<af-cultural-card></af-cultural-card>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\divider",
+      "tagName": "af-divider",
+      "className": "AfriDivider",
       "filePath": "components\\divider.js",
       "slots": [
         "default"
@@ -212,11 +221,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\divider></af-components\\divider>",
+      "example": "<af-divider></af-divider>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\dropdown",
+      "tagName": "af-dropdown",
+      "className": "AfriDropdown",
       "filePath": "components\\dropdown.js",
       "slots": [
         "default"
@@ -231,11 +241,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\dropdown></af-components\\dropdown>",
+      "example": "<af-dropdown></af-dropdown>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\error-boundary",
+      "tagName": "af-error-boundary",
+      "className": "AfriErrorBoundary",
       "filePath": "components\\error-boundary.js",
       "slots": [
         "default"
@@ -250,11 +261,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\error-boundary></af-components\\error-boundary>",
+      "example": "<af-error-boundary></af-error-boundary>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\form",
+      "tagName": "af-form",
+      "className": "AfriForm",
       "filePath": "components\\form.js",
       "slots": [
         "default"
@@ -278,11 +290,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\form></af-components\\form>",
+      "example": "<af-form></af-form>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\grid",
+      "tagName": "af-grid",
+      "className": "AfriGrid",
       "filePath": "components\\grid.js",
       "slots": [
         "default"
@@ -324,11 +337,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\grid></af-components\\grid>",
+      "example": "<af-grid></af-grid>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\hero",
+      "tagName": "af-hero",
+      "className": "AfriHero",
       "filePath": "components\\hero.js",
       "slots": [
         "default"
@@ -349,11 +363,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\hero></af-components\\hero>",
+      "example": "<af-hero></af-hero>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\icon",
+      "tagName": "af-icon",
+      "className": "AfriIcon",
       "filePath": "components\\icon.js",
       "slots": [
         "default"
@@ -368,11 +383,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\icon></af-components\\icon>",
+      "example": "<af-icon></af-icon>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\input",
+      "tagName": "af-input",
+      "className": "AfriInput",
       "filePath": "components\\input.js",
       "slots": [
         "default"
@@ -417,11 +433,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\input></af-components\\input>",
+      "example": "<af-input></af-input>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\kanga-card",
+      "tagName": "af-kanga-card",
+      "className": "KangaCard",
       "filePath": "components\\kanga-card.js",
       "slots": [
         "default"
@@ -439,11 +456,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\kanga-card></af-components\\kanga-card>",
+      "example": "<af-kanga-card></af-kanga-card>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\language-switcher",
+      "tagName": "af-language-switcher",
+      "className": "AfriLanguageSwitcher",
       "filePath": "components\\language-switcher.js",
       "slots": [
         "default"
@@ -455,11 +473,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\language-switcher></af-components\\language-switcher>",
+      "example": "<af-language-switcher></af-language-switcher>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\loader",
+      "tagName": "af-loader",
+      "className": "AfriLoader",
       "filePath": "components\\loader.js",
       "slots": [
         "default"
@@ -477,11 +496,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\loader></af-components\\loader>",
+      "example": "<af-loader></af-loader>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\modal",
+      "tagName": "af-modal",
+      "className": "AfriModal",
       "filePath": "components\\modal.js",
       "slots": [
         "default"
@@ -505,11 +525,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\modal></af-components\\modal>",
+      "example": "<af-modal></af-modal>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\motion",
+      "tagName": "af-motion",
+      "className": "MotionComponent",
       "filePath": "components\\motion.js",
       "slots": [
         "default"
@@ -524,11 +545,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\motion></af-components\\motion>",
+      "example": "<af-motion></af-motion>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\navbar",
+      "tagName": "af-navbar",
+      "className": "AfriNavbar",
       "filePath": "components\\navbar.js",
       "slots": [
         "default"
@@ -546,11 +568,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\navbar></af-components\\navbar>",
+      "example": "<af-navbar></af-navbar>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\pattern-showcase",
+      "tagName": "af-pattern-showcase",
+      "className": "PatternShowcase",
       "filePath": "components\\pattern-showcase.js",
       "slots": [
         "default"
@@ -565,11 +588,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\pattern-showcase></af-components\\pattern-showcase>",
+      "example": "<af-pattern-showcase></af-pattern-showcase>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\progress",
+      "tagName": "af-progress",
+      "className": "AfriProgress",
       "filePath": "components\\progress.js",
       "slots": [
         "default"
@@ -596,11 +620,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\progress></af-components\\progress>",
+      "example": "<af-progress></af-progress>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\react",
+      "tagName": "af-react",
+      "className": "AfriReact",
       "filePath": "components\\react.js",
       "slots": [
         "default"
@@ -612,11 +637,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\react></af-components\\react>",
+      "example": "<af-react></af-react>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\section",
+      "tagName": "af-section",
+      "className": "AfriSection",
       "filePath": "components\\section.js",
       "slots": [
         "default"
@@ -624,11 +650,12 @@
       "attributes": {},
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\section></af-components\\section>",
+      "example": "<af-section></af-section>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\select",
+      "tagName": "af-select",
+      "className": "AfriSelect",
       "filePath": "components\\select.js",
       "slots": [
         "default"
@@ -658,11 +685,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\select></af-components\\select>",
+      "example": "<af-select></af-select>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\sidebar",
+      "tagName": "af-sidebar",
+      "className": "AfriSidebar",
       "filePath": "components\\sidebar.js",
       "slots": [
         "default"
@@ -674,11 +702,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\sidebar></af-components\\sidebar>",
+      "example": "<af-sidebar></af-sidebar>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\skeleton",
+      "tagName": "af-skeleton",
+      "className": "AfriSkeleton",
       "filePath": "components\\skeleton.js",
       "slots": [
         "default"
@@ -699,11 +728,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\skeleton></af-components\\skeleton>",
+      "example": "<af-skeleton></af-skeleton>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\table",
+      "tagName": "af-table",
+      "className": "AfriTable",
       "filePath": "components\\table.js",
       "slots": [
         "default"
@@ -721,11 +751,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\table></af-components\\table>",
+      "example": "<af-table></af-table>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\tabs",
+      "tagName": "af-tabs",
+      "className": "AfriTabs",
       "filePath": "components\\tabs.js",
       "slots": [
         "default"
@@ -737,11 +768,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\tabs></af-components\\tabs>",
+      "example": "<af-tabs></af-tabs>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\theme-toggle",
+      "tagName": "af-theme-toggle",
+      "className": "Theme-toggleComponent",
       "filePath": "components\\theme-toggle.js",
       "slots": [
         "default"
@@ -749,11 +781,12 @@
       "attributes": {},
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\theme-toggle></af-components\\theme-toggle>",
+      "example": "<af-theme-toggle></af-theme-toggle>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\toast",
+      "tagName": "af-toast",
+      "className": "AfriToast",
       "filePath": "components\\toast.js",
       "slots": [
         "default"
@@ -771,11 +804,12 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\toast></af-components\\toast>",
+      "example": "<af-toast></af-toast>",
       "securityNotes": "Sanitizes slot content"
     },
     {
-      "tagName": "af-components\\tooltip",
+      "tagName": "af-tooltip",
+      "className": "AfriTooltip",
       "filePath": "components\\tooltip.js",
       "slots": [
         "default"
@@ -790,7 +824,7 @@
       },
       "events": [],
       "cssCustomProperties": [],
-      "example": "<af-components\\tooltip></af-components\\tooltip>",
+      "example": "<af-tooltip></af-tooltip>",
       "securityNotes": "Sanitizes slot content"
     }
   ],

package/components/base.d.ts

@@ -56,7 +56,7 @@ export class AfriCodeComponent extends HTMLElement {
   /**
    * Load and apply component styles
    */
-  loadStyles(css?: string): void;
+  loadStyles(css?: string): Promise<void>;
 
   /**
    * Render component to shadow DOM

package/components/base.js

@@ -9,11 +9,14 @@
 
 import { html } from '../core/html.js';
 
+const BaseHTMLElement = globalThis.HTMLElement ?? class {};
+const hasConstructableStylesheets = typeof CSSStyleSheet !== 'undefined';
+
 /**
  * Base class for AfriCode components
  * All components extend this to inherit common functionality
  */
-export class AfriCodeComponent extends HTMLElement {
+export class AfriCodeComponent extends BaseHTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
@@ -84,8 +87,11 @@ export class AfriCodeComponent extends HTMLElement {
      * @param {CSSStyleSheet} sheet - A Constructable Stylesheet instance
      */
     static injectGlobalSheet(sheet) {
+        if (!hasConstructableStylesheets) {
+            return;
+        }
+
         if (!(sheet instanceof CSSStyleSheet)) {
-            console.error('[AfriCode] injectGlobalSheet requires a CSSStyleSheet instance.');
             return;
         }
         if (!AfriCodeComponent.globalSheets.includes(sheet)) {
@@ -98,37 +104,77 @@ export class AfriCodeComponent extends HTMLElement {
      * Optimized to fetch only once per session.
      * Also adopts any globally injected sheets (e.g. Tailwind utilities).
      */
-    async loadStyles() {
+    async loadStyles(css = '') {
         const styleUrl = '/styles/africanity.css';
+        if (!this.shadowRoot) {
+            return;
+        }
+
+        const canAdoptStyleSheets = hasConstructableStylesheets && 'adoptedStyleSheets' in this.shadowRoot;
+        const sourceKey = typeof css === 'string' && css.length > 0 ? css : styleUrl;
+        const stylesheetText = typeof css === 'string' && css.length > 0 ? css : null;
 
         // 1. Check cache first
-        if (AfriCodeComponent.styleCache.has(styleUrl)) {
-            this.shadowRoot.adoptedStyleSheets = [
-                AfriCodeComponent.styleCache.get(styleUrl),
-                ...AfriCodeComponent.globalSheets
-            ];
+        if (AfriCodeComponent.styleCache.has(sourceKey)) {
+            const cached = AfriCodeComponent.styleCache.get(sourceKey);
+            if (canAdoptStyleSheets) {
+                this.shadowRoot.adoptedStyleSheets = [
+                    cached,
+                    ...AfriCodeComponent.globalSheets
+                ];
+            } else {
+                this._applyFallbackStyle(cached?.cssText || cached?.text || cached || '');
+            }
             return;
         }
 
         // 2. Fetch if not cached (Single Request)
         try {
-            const response = await fetch(styleUrl);
-            const css = await response.text();
+            let resolvedCss = stylesheetText;
 
-            const styleSheet = new CSSStyleSheet();
-            styleSheet.replaceSync(css);
+            if (!resolvedCss) {
+                const response = await fetch(styleUrl);
+                if (!response.ok) {
+                    throw new Error(`Unable to load stylesheet: ${response.status}`);
+                }
+                resolvedCss = await response.text();
+            }
+
+            if (canAdoptStyleSheets) {
+                const styleSheet = new CSSStyleSheet();
+                styleSheet.replaceSync(resolvedCss);
+
+                // Cache it
+                AfriCodeComponent.styleCache.set(sourceKey, styleSheet);
+
+                // Apply core + any global sheets
+                this.shadowRoot.adoptedStyleSheets = [
+                    styleSheet,
+                    ...AfriCodeComponent.globalSheets
+                ];
+                return;
+            }
+
+            this._applyFallbackStyle(resolvedCss);
+            AfriCodeComponent.styleCache.set(sourceKey, { text: resolvedCss });
+        } catch (err) {
+            this._applyFallbackStyle(stylesheetText || '');
+        }
+    }
 
-            // Cache it
-            AfriCodeComponent.styleCache.set(styleUrl, styleSheet);
+    _applyFallbackStyle(css) {
+        if (!this.shadowRoot) {
+            return;
+        }
 
-            // Apply core + any global sheets
-            this.shadowRoot.adoptedStyleSheets = [
-                styleSheet,
-                ...AfriCodeComponent.globalSheets
-            ];
-        } catch (err) {
-            console.warn('AfriCode: Failed to load core styles', err);
+        let style = this.shadowRoot.querySelector('style[data-africode-core-styles]');
+        if (!style) {
+            style = document.createElement('style');
+            style.setAttribute('data-africode-core-styles', '');
+            this.shadowRoot.prepend(style);
         }
+
+        style.textContent = css;
     }
 
     /**
@@ -175,6 +221,10 @@ export class AfriCodeComponent extends HTMLElement {
  * @param {typeof HTMLElement} component - Component class
  */
 export function registerComponent(name, component) {
+    if (typeof customElements === 'undefined') {
+        return;
+    }
+
     if (!customElements.get(name)) {
         customElements.define(name, component);
     }