@keenmate/pure-admin-core 2.0.2 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "2.0.2",
+  "version": "2.1.1",
   "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
   "style": "dist/css/main.css",
   "exports": {
@@ -9,7 +9,6 @@
     "./css/*": "./dist/css/*",
     "./scss": "./src/scss/main.scss",
     "./scss/*": "./src/scss/*",
-    "./fonts/*": "./dist/fonts/*",
     "./snippets/*": "./snippets/*"
   },
   "files": [
@@ -17,6 +16,7 @@
     "src/scss/",
     "schemas/",
     "scripts/pack-theme.js",
+    "scripts/download-themes.js",
     "snippets/",
     "README.md",
     "LICENSE"
@@ -24,8 +24,7 @@
   "scripts": {
     "build:scss": "sass src/scss/main.scss dist/css/main.css --no-source-map --silence-deprecation=import",
     "build:scss:watch": "sass src/scss/main.scss dist/css/main.css --watch --silence-deprecation=import",
-    "build:fonts": "node scripts/copy-fonts.js",
-    "build": "npm run build:scss && npm run build:fonts",
+    "build": "npm run build:scss",
     "watch": "npm run build:scss:watch",
     "generate-hashes": "node scripts/generate-hashes.js",
     "pack-theme": "node scripts/pack-theme.js",
@@ -41,6 +40,9 @@
     "components",
     "ui-kit"
   ],
+  "bin": {
+    "download-themes": "./scripts/download-themes.js"
+  },
   "author": "KeenMate",
   "license": "MIT",
   "peerDependencies": {

package/scripts/download-themes.js

@@ -0,0 +1,351 @@
+#!/usr/bin/env node
+
+/**
+ * Download themes from pureadmin.io
+ *
+ * Reads themes.json + .themes.json (local override) and downloads
+ * themes that don't have a local "path" set.
+ *
+ * Format:
+ *   {
+ *     "themes": {
+ *       "audi": {},                                    // download from pureadmin.io
+ *       "corporate": { "path": "../my-themes/corp" },  // use local path
+ *       "custom": { "url": "https://..." }             // download from custom URL
+ *     }
+ *   }
+ *
+ * Downloaded themes are saved to ./themes/{name}/dist/{name}.css
+ */
+
+const fs = require('fs');
+const path = require('path');
+const https = require('https');
+const http = require('http');
+
+const BUNDLE_URL = 'https://pureadmin.io/api/bundle';
+const PROJECT_ROOT = process.cwd();
+const THEMES_DIR = path.join(PROJECT_ROOT, 'themes');
+const THEMES_CONFIG = path.join(PROJECT_ROOT, 'themes.json');
+const THEMES_LOCAL = path.join(PROJECT_ROOT, '.themes.json');
+
+function download(url) {
+    return new Promise((resolve, reject) => {
+        const client = url.startsWith('https') ? https : http;
+
+        client.get(url, (res) => {
+            if (res.statusCode >= 300 && res.statusCode < 400 && res.headers.location) {
+                return download(res.headers.location).then(resolve).catch(reject);
+            }
+
+            if (res.statusCode !== 200) {
+                reject(new Error(`HTTP ${res.statusCode} for ${url}`));
+                return;
+            }
+
+            const chunks = [];
+            res.on('data', chunk => chunks.push(chunk));
+            res.on('end', () => resolve(Buffer.concat(chunks)));
+            res.on('error', reject);
+        }).on('error', reject);
+    });
+}
+
+function extractZip(buffer, destDir) {
+    const tmpFile = path.join(destDir, '..', '_tmp_theme.zip');
+    if (!fs.existsSync(path.dirname(tmpFile))) {
+        fs.mkdirSync(path.dirname(tmpFile), { recursive: true });
+    }
+    fs.writeFileSync(tmpFile, buffer);
+
+    const { execSync } = require('child_process');
+    try {
+        execSync(`unzip -o "${tmpFile}" -d "${destDir}"`, { stdio: 'ignore' });
+    } catch (e) {
+        try {
+            execSync(`powershell -Command "Expand-Archive -Force -Path '${tmpFile}' -DestinationPath '${destDir}'"`, { stdio: 'ignore' });
+        } catch (e2) {
+            fs.unlinkSync(tmpFile);
+            throw new Error('Could not extract zip. Install unzip or use PowerShell.');
+        }
+    }
+    fs.unlinkSync(tmpFile);
+}
+
+function findThemeCss(dir, themeName) {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+    for (const entry of entries) {
+        const fullPath = path.join(dir, entry.name);
+
+        if (entry.isFile() && entry.name === `${themeName}.css`) {
+            return fullPath;
+        }
+
+        if (entry.isDirectory()) {
+            const found = findThemeCss(fullPath, themeName);
+            if (found) return found;
+        }
+    }
+
+    return null;
+}
+
+function getThemeVersion(themeDir) {
+    const manifestPath = path.join(themeDir, 'theme.json');
+    if (fs.existsSync(manifestPath)) {
+        try {
+            const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+            return manifest.version || null;
+        } catch (e) {
+            return null;
+        }
+    }
+    return null;
+}
+
+function copyDir(src, dest) {
+    if (!fs.existsSync(dest)) {
+        fs.mkdirSync(dest, { recursive: true });
+    }
+
+    const entries = fs.readdirSync(src, { withFileTypes: true });
+    for (const entry of entries) {
+        const srcPath = path.join(src, entry.name);
+        const destPath = path.join(dest, entry.name);
+
+        if (entry.isDirectory()) {
+            copyDir(srcPath, destPath);
+        } else {
+            fs.copyFileSync(srcPath, destPath);
+        }
+    }
+}
+
+async function main() {
+    // Load themes.json (base) + .themes.json (local overrides)
+    let themes = {};
+
+    if (fs.existsSync(THEMES_CONFIG)) {
+        const base = JSON.parse(fs.readFileSync(THEMES_CONFIG, 'utf-8'));
+        themes = { ...themes, ...(base.themes || {}) };
+        console.log(`Loaded themes.json (${Object.keys(base.themes || {}).length} theme(s))`);
+    }
+
+    if (fs.existsSync(THEMES_LOCAL)) {
+        const local = JSON.parse(fs.readFileSync(THEMES_LOCAL, 'utf-8'));
+        themes = { ...themes, ...(local.themes || {}) };
+        console.log(`Loaded .themes.json (${Object.keys(local.themes || {}).length} override(s))`);
+    }
+
+    if (Object.keys(themes).length === 0) {
+        console.error('No themes found. Create themes.json or .themes.json, e.g.:');
+        console.error('  { "themes": { "audi": {}, "corporate": {} } }');
+        process.exit(1);
+    }
+
+    console.log('');
+
+    // Ensure themes directory exists
+    if (!fs.existsSync(THEMES_DIR)) {
+        fs.mkdirSync(THEMES_DIR, { recursive: true });
+    }
+
+    // Separate themes by type
+    const bundleThemes = [];  // No path, no url — download from bundle
+    const urlThemes = [];     // Custom url
+    const localThemes = [];   // Has path — skip
+
+    for (const [name, config] of Object.entries(themes)) {
+        const cfg = config || {};
+        if (cfg.path) {
+            localThemes.push(name);
+        } else if (cfg.url) {
+            urlThemes.push({ name, url: cfg.url });
+        } else {
+            bundleThemes.push(name);
+        }
+    }
+
+    let downloaded = 0;
+
+    // Download named themes via bundle (single request)
+    if (bundleThemes.length > 0) {
+        process.stdout.write(`Fetching theme bundle from pureadmin.io (${bundleThemes.length} theme(s))...`);
+
+        try {
+            const data = await download(BUNDLE_URL);
+            console.log(` ${(data.length / 1024).toFixed(0)}KB`);
+
+            // Extract bundle to temp dir
+            const tmpDir = path.join(THEMES_DIR, '_bundle_tmp');
+            if (fs.existsSync(tmpDir)) {
+                fs.rmSync(tmpDir, { recursive: true });
+            }
+            fs.mkdirSync(tmpDir, { recursive: true });
+            extractZip(data, tmpDir);
+
+            // Find and copy requested themes
+            for (const name of bundleThemes) {
+                const cssFile = findThemeCss(tmpDir, name);
+
+                if (cssFile) {
+                    const themeDestDir = path.join(THEMES_DIR, name);
+                    const distDir = path.join(themeDestDir, 'dist');
+                    if (!fs.existsSync(distDir)) {
+                        fs.mkdirSync(distDir, { recursive: true });
+                    }
+                    fs.copyFileSync(cssFile, path.join(distDir, `${name}.css`));
+
+                    // Copy assets dir if it exists (fonts etc.)
+                    const assetsDir = path.join(path.dirname(cssFile), 'assets');
+                    if (fs.existsSync(assetsDir)) {
+                        copyDir(assetsDir, path.join(distDir, 'assets'));
+                    }
+
+                    // Copy theme.json manifest if it exists
+                    const themeJsonSrc = path.join(path.dirname(cssFile), '..', 'theme.json');
+                    if (fs.existsSync(themeJsonSrc)) {
+                        fs.copyFileSync(themeJsonSrc, path.join(themeDestDir, 'theme.json'));
+                    }
+
+                    // Read version from theme.json
+                    const version = getThemeVersion(themeDestDir);
+                    console.log(`  ${name}: extracted${version ? ` (v${version})` : ''}`);
+                    downloaded++;
+                } else {
+                    console.log(`  ${name}: NOT FOUND in bundle`);
+                }
+            }
+
+            // Clean up temp dir
+            fs.rmSync(tmpDir, { recursive: true });
+        } catch (err) {
+            console.log(` FAILED: ${err.message}`);
+        }
+    }
+
+    // Download URL themes individually
+    for (const { name, url } of urlThemes) {
+        process.stdout.write(`  ${name}: downloading from ${url}...`);
+
+        try {
+            const data = await download(url);
+            const themeDestDir = path.join(THEMES_DIR, name);
+
+            if (data[0] === 0x50 && data[1] === 0x4B) {
+                if (!fs.existsSync(themeDestDir)) {
+                    fs.mkdirSync(themeDestDir, { recursive: true });
+                }
+                extractZip(data, themeDestDir);
+            } else {
+                const distDir = path.join(themeDestDir, 'dist');
+                if (!fs.existsSync(distDir)) {
+                    fs.mkdirSync(distDir, { recursive: true });
+                }
+                fs.writeFileSync(path.join(distDir, `${name}.css`), data);
+            }
+
+            console.log(' done');
+            downloaded++;
+        } catch (err) {
+            console.log(` FAILED: ${err.message}`);
+        }
+    }
+
+    // Report skipped
+    for (const name of localThemes) {
+        console.log(`  ${name}: local path (${themes[name].path}), skipping`);
+    }
+
+    console.log(`\nDownloaded ${downloaded} theme(s), skipped ${localThemes.length} local path(s)`);
+
+    // Check compatibility with installed core version
+    checkCoreCompatibility();
+}
+
+/**
+ * Check if downloaded themes are compatible with the installed core version
+ */
+function checkCoreCompatibility() {
+    // Find installed core version
+    const corePkgPaths = [
+        path.join(PROJECT_ROOT, 'node_modules', '@keenmate', 'pure-admin-core', 'package.json'),
+        path.join(PROJECT_ROOT, '..', 'packages', 'core', 'package.json') // workspace
+    ];
+
+    let coreVersion = null;
+    for (const p of corePkgPaths) {
+        if (fs.existsSync(p)) {
+            try {
+                const pkg = JSON.parse(fs.readFileSync(p, 'utf-8'));
+                coreVersion = pkg.version;
+                break;
+            } catch (e) {}
+        }
+    }
+
+    if (!coreVersion) return;
+
+    // Check each downloaded theme
+    const warnings = [];
+    const themeDirs = fs.readdirSync(THEMES_DIR, { withFileTypes: true })
+        .filter(d => d.isDirectory())
+        .map(d => d.name);
+
+    for (const name of themeDirs) {
+        const manifestPath = path.join(THEMES_DIR, name, 'theme.json');
+        if (!fs.existsSync(manifestPath)) continue;
+
+        try {
+            const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+            const requiredCore = manifest.dependencies && manifest.dependencies.core;
+            if (!requiredCore) continue;
+
+            if (!satisfiesSemver(coreVersion, requiredCore)) {
+                warnings.push(`  ${name} (v${manifest.version}) requires core ${requiredCore}, installed: ${coreVersion}`);
+            }
+        } catch (e) {}
+    }
+
+    if (warnings.length > 0) {
+        console.log('\n⚠ Compatibility warnings:');
+        warnings.forEach(w => console.log(w));
+        console.log('\nConsider updating @keenmate/pure-admin-core');
+    } else if (themeDirs.length > 0) {
+        console.log(`\nAll themes compatible with core v${coreVersion}`);
+    }
+}
+
+/**
+ * Simple semver satisfaction check for ^major.minor.patch ranges
+ */
+function satisfiesSemver(version, range) {
+    // Parse version
+    const v = version.replace(/^v/, '').split('.').map(Number);
+
+    // Parse range (supports ^x.y.z and x.y.z)
+    const caret = range.startsWith('^');
+    const r = range.replace(/^[\^~]/, '').split('.').map(Number);
+
+    if (caret) {
+        // ^2.0.0 means >=2.0.0 <3.0.0
+        // ^0.2.0 means >=0.2.0 <0.3.0
+        if (r[0] > 0) {
+            return v[0] === r[0] && (v[1] > r[1] || (v[1] === r[1] && v[2] >= r[2]));
+        } else if (r[1] > 0) {
+            return v[0] === 0 && v[1] === r[1] && v[2] >= r[2];
+        } else {
+            return v[0] === 0 && v[1] === 0 && v[2] === r[2];
+        }
+    }
+
+    // Exact match
+    return v[0] === r[0] && v[1] === r[1] && v[2] === r[2];
+}
+
+console.log('Downloading themes...\n');
+main().catch(err => {
+    console.error('Fatal error:', err.message);
+    process.exit(1);
+});

package/scripts/pack-theme.js

@@ -311,8 +311,8 @@ ${theme.modes && theme.modes.supported && theme.modes.supported.length > 1
 
 ## More Information
 
-- Pure Admin documentation: https://pure-admin.keenmate.dev
-- Theme gallery: https://pure-theme-park.keenmate.dev
+- Pure Admin documentation: https://demo.pureadmin.io
+- Theme gallery: https://pureadmin.io
 ${theme.homepage ? `- Theme homepage: ${theme.homepage}` : ''}
 
 ---

package/snippets/badges.html

@@ -83,9 +83,9 @@
   <span class="pa-badge pa-badge--info minwr-15 maxwr-15 text-truncate">Very Long Badge Text That Needs Truncation</span>
 </span>
 
-<!-- Fixed Width with Left Ellipsis (for paths, breadcrumbs) -->
+<!-- Fixed Width with Start-Side Ellipsis (for paths, breadcrumbs) -->
 <span class="pa-tooltip pa-tooltip--bottom pa-tooltip--multiline" data-tooltip="Settings > User Preferences > Notifications > Email">
-  <span class="pa-badge pa-badge--secondary minwr-10 maxwr-10 text-truncate pa-badge--ellipsis-left">Settings > User Preferences > Notifications > Email</span>
+  <span class="pa-badge pa-badge--secondary minwr-10 maxwr-10 text-truncate pa-badge--ellipsis-start">Settings > User Preferences > Notifications > Email</span>
 </span>
 
 
@@ -186,8 +186,8 @@ SIZES:
 
 MODIFIERS:
 - .pa-badge--pill: Rounded pill shape
-- .pa-badge--ellipsis-left: Truncate from left instead of right
-- Use utilities for fixed width: minwr-* maxwr-* text-truncate
+- .pa-badge--ellipsis-start: Truncate from start instead of end
+- Use utilities for fixed width: maxwr-* text-truncate
 
 ELEMENTS:
 - .pa-badge__icon: Icon container inside badge

package/snippets/buttons.html

@@ -190,6 +190,70 @@
 </div>
 
 
+<!-- SPLIT BUTTONS -->
+
+<!-- Basic Split Button (chevron rotates on open) -->
+<div class="pa-btn-split">
+  <button class="pa-btn pa-btn--primary">Save</button>
+  <button class="pa-btn pa-btn--primary pa-btn-split__toggle" onclick="toggleSplitMenu(event)">
+    <i class="fas fa-chevron-down text-2xs pa-btn-split__chevron"></i>
+  </button>
+  <div class="pa-btn-split__menu">
+    <button class="pa-btn-split__item">Save as Draft</button>
+    <button class="pa-btn-split__item">Save &amp; Close</button>
+  </div>
+</div>
+
+<!-- Split Button with Danger Item -->
+<div class="pa-btn-split">
+  <button class="pa-btn pa-btn--primary">Export</button>
+  <button class="pa-btn pa-btn--primary pa-btn-split__toggle" onclick="toggleSplitMenu(event)">
+    <i class="fas fa-chevron-down text-2xs pa-btn-split__chevron"></i>
+  </button>
+  <div class="pa-btn-split__menu">
+    <button class="pa-btn-split__item">Export as CSV</button>
+    <button class="pa-btn-split__item">Export as PDF</button>
+    <button class="pa-btn-split__item pa-btn-split__item--danger">Delete All</button>
+  </div>
+</div>
+
+<!-- Split Button - Upward Placement -->
+<div class="pa-btn-split" data-placement="top-end">
+  <button class="pa-btn pa-btn--primary">Upload</button>
+  <button class="pa-btn pa-btn--primary pa-btn-split__toggle" onclick="toggleSplitMenu(event)">
+    <i class="fas fa-chevron-up text-2xs pa-btn-split__chevron"></i>
+  </button>
+  <div class="pa-btn-split__menu">
+    <button class="pa-btn-split__item">Upload File</button>
+    <button class="pa-btn-split__item">Upload Folder</button>
+  </div>
+</div>
+
+<!-- Split Button - Custom Icon (no rotation) -->
+<div class="pa-btn-split">
+  <button class="pa-btn pa-btn--secondary">Share</button>
+  <button class="pa-btn pa-btn--secondary pa-btn-split__toggle" onclick="toggleSplitMenu(event)">
+    <i class="fas fa-ellipsis-vertical"></i>
+  </button>
+  <div class="pa-btn-split__menu">
+    <button class="pa-btn-split__item">Share via Email</button>
+    <button class="pa-btn-split__item">Share via Link</button>
+  </div>
+</div>
+
+<!-- Split Button - Caret Icon (rotates) -->
+<div class="pa-btn-split">
+  <button class="pa-btn pa-btn--danger">Delete</button>
+  <button class="pa-btn pa-btn--danger pa-btn-split__toggle" onclick="toggleSplitMenu(event)">
+    <i class="fas fa-caret-down pa-btn-split__chevron"></i>
+  </button>
+  <div class="pa-btn-split__menu">
+    <button class="pa-btn-split__item pa-btn-split__item--danger">Delete Permanently</button>
+    <button class="pa-btn-split__item">Move to Trash</button>
+  </div>
+</div>
+
+
 <!-- BUTTONS WITH ICONS -->
 
 <!-- Button with Icon (Text Icon) -->

package/snippets/tooltips.html

@@ -19,14 +19,14 @@
 <!-- Tooltip Top (default) -->
 <span class="pa-tooltip" data-tooltip="This is a tooltip">Hover me</span>
 
-<!-- Tooltip Right -->
-<span class="pa-tooltip pa-tooltip--right" data-tooltip="Tooltip on the right">Hover me</span>
+<!-- Tooltip End -->
+<span class="pa-tooltip pa-tooltip--end" data-tooltip="Tooltip on the end">Hover me</span>
 
 <!-- Tooltip Bottom -->
 <span class="pa-tooltip pa-tooltip--bottom" data-tooltip="Tooltip on the bottom">Hover me</span>
 
-<!-- Tooltip Left -->
-<span class="pa-tooltip pa-tooltip--left" data-tooltip="Tooltip on the left">Hover me</span>
+<!-- Tooltip Start -->
+<span class="pa-tooltip pa-tooltip--start" data-tooltip="Tooltip on the start">Hover me</span>
 
 
 <!-- TOOLTIP POSITIONS (All 4 directions) -->
@@ -36,9 +36,9 @@
   Top
 </button>
 
-<!-- Right Tooltip -->
-<button class="pa-btn pa-btn--primary pa-tooltip pa-tooltip--right" data-tooltip="Right tooltip">
-  Right
+<!-- End Tooltip -->
+<button class="pa-btn pa-btn--primary pa-tooltip pa-tooltip--end" data-tooltip="End tooltip">
+  End
 </button>
 
 <!-- Bottom Tooltip -->
@@ -46,9 +46,9 @@
   Bottom
 </button>
 
-<!-- Left Tooltip -->
-<button class="pa-btn pa-btn--primary pa-tooltip pa-tooltip--left" data-tooltip="Left tooltip">
-  Left
+<!-- Start Tooltip -->
+<button class="pa-btn pa-btn--primary pa-tooltip pa-tooltip--start" data-tooltip="Start tooltip">
+  Start
 </button>
 
 
@@ -109,14 +109,14 @@
   Primary Bottom
 </button>
 
-<!-- Success Right Tooltip -->
-<button class="pa-btn pa-btn--success pa-tooltip pa-tooltip--success pa-tooltip--right" data-tooltip="Operation successful!">
-  Success Right
+<!-- Success End Tooltip -->
+<button class="pa-btn pa-btn--success pa-tooltip pa-tooltip--success pa-tooltip--end" data-tooltip="Operation successful!">
+  Success End
 </button>
 
-<!-- Danger Left Tooltip -->
-<button class="pa-btn pa-btn--danger pa-tooltip pa-tooltip--danger pa-tooltip--left" data-tooltip="Critical warning!">
-  Danger Left
+<!-- Danger Start Tooltip -->
+<button class="pa-btn pa-btn--danger pa-tooltip pa-tooltip--danger pa-tooltip--start" data-tooltip="Critical warning!">
+  Danger Start
 </button>
 
 
@@ -176,7 +176,7 @@
 
 <!-- Popovers are click-triggered rich content overlays
      - Use Floating UI for positioning (like tooltips)
-     - Support all 4 positions (top, right, bottom, left) via data-placement attribute
+     - Support all 4 positions (top, end, bottom, start) via data-placement attribute
      - Auto collision detection and flipping
      - Close with X button or clicking outside
 -->
@@ -195,8 +195,8 @@
   </div>
 </div>
 
-<!-- Popover Right -->
-<div class="pa-popover" data-placement="right">
+<!-- Popover End -->
+<div class="pa-popover" data-placement="end">
   <button class="pa-popover__trigger">i</button>
   <div class="pa-popover__content">
     <div class="pa-popover__header">
@@ -204,7 +204,7 @@
       <button class="pa-popover__close">×</button>
     </div>
     <div class="pa-popover__body">
-      <p>Popover positioned to the right.</p>
+      <p>Popover positioned at the inline-end.</p>
     </div>
   </div>
 </div>
@@ -223,8 +223,8 @@
   </div>
 </div>
 
-<!-- Popover Left -->
-<div class="pa-popover" data-placement="left">
+<!-- Popover Start -->
+<div class="pa-popover" data-placement="start">
   <button class="pa-popover__trigger">!</button>
   <div class="pa-popover__content">
     <div class="pa-popover__header">
@@ -232,7 +232,7 @@
       <button class="pa-popover__close">×</button>
     </div>
     <div class="pa-popover__body">
-      <p>Popover positioned to the left.</p>
+      <p>Popover positioned at the inline-start.</p>
     </div>
   </div>
 </div>
@@ -286,16 +286,16 @@
 
 <!-- POPOVER ALIGNMENT -->
 
-<!-- Left Aligned (default) -->
+<!-- Start Aligned (default) -->
 <div class="pa-popover" data-placement="bottom">
   <button class="pa-popover__trigger">?</button>
   <div class="pa-popover__content">
     <div class="pa-popover__header">
-      <h4>Left Aligned</h4>
+      <h4>Start Aligned</h4>
       <button class="pa-popover__close">×</button>
     </div>
     <div class="pa-popover__body">
-      <p>Default alignment is left.</p>
+      <p>Default alignment is start.</p>
       <ul>
         <li>Lists look natural</li>
         <li>Easy to read</li>
@@ -318,16 +318,16 @@
   </div>
 </div>
 
-<!-- Right Aligned -->
+<!-- End Aligned -->
 <div class="pa-popover pa-popover--end" data-placement="bottom">
   <button class="pa-popover__trigger">?</button>
   <div class="pa-popover__content">
     <div class="pa-popover__header">
-      <h4>Right Aligned</h4>
+      <h4>End Aligned</h4>
       <button class="pa-popover__close">×</button>
     </div>
     <div class="pa-popover__body">
-      <p>Use --right modifier for RTL layouts.</p>
+      <p>Use --end modifier for end-aligned text.</p>
     </div>
   </div>
 </div>
@@ -357,7 +357,7 @@
 </div>
 
 <!-- Popover with Code -->
-<div class="pa-popover pa-popover--lg" data-placement="right">
+<div class="pa-popover pa-popover--lg" data-placement="end">
   <button class="pa-popover__trigger">?</button>
   <div class="pa-popover__content">
     <div class="pa-popover__header">
@@ -399,10 +399,10 @@ document.addEventListener('content-loaded', function() {
 TOOLTIPS:
 - pa-tooltip (base class, top position by default)
 
-POSITIONS:
-- pa-tooltip--right
+POSITIONS (RTL-aware):
+- pa-tooltip--end (inline-end: right in LTR, left in RTL)
 - pa-tooltip--bottom
-- pa-tooltip--left
+- pa-tooltip--start (inline-start: left in LTR, right in RTL)
 
 VARIANTS:
 - pa-tooltip--primary (primary colored background)
@@ -417,11 +417,11 @@ MULTILINE:
 POPOVERS:
 - pa-popover (base container)
 
-POSITIONING (use data-placement attribute):
+POSITIONING (use data-placement attribute, RTL-aware):
 - data-placement="top" (default)
-- data-placement="right"
+- data-placement="end" (inline-end: right in LTR, left in RTL)
 - data-placement="bottom"
-- data-placement="left"
+- data-placement="start" (inline-start: left in LTR, right in RTL)
 
 SIZES:
 - pa-popover--sm (small)