@typo3/icons 4.3.3 → 4.4.0

package/dist/svgs/actions/actions-arrow-down-end-alt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M7.843 12.95a.999.999 0 0 1 0-1.414L10.379 9H3a1 1 0 0 1-1-1V3a1 1 0 0 1 2 0v4h6.379L7.843 4.464A.999.999 0 1 1 9.257 3.05l3.536 3.536.707.707a1 1 0 0 1 0 1.414l-.707.707-3.536 3.536a1 1 0 0 1-1.414 0z"/></g></svg>

package/dist/svgs/actions/actions-arrow-down-end.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="m13.512 9.389-3.7 2.96a.5.5 0 0 1-.812-.39V6.04a.5.5 0 0 1 .812-.39l3.7 2.959a.5.5 0 0 1 0 .78z"/><path d="M3 4v6h7V8H5V4z"/></g></svg>

package/dist/svgs/actions/actions-arrow-down-start-alt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M8.157 12.95a.999.999 0 0 0 0-1.414L5.621 9H13a1 1 0 0 0 1-1V3a1 1 0 0 0-2 0v4H5.621l2.536-2.536A.999.999 0 1 0 6.743 3.05L3.207 6.586l-.707.707a1 1 0 0 0 0 1.414l.707.707 3.536 3.536a1 1 0 0 0 1.414 0z"/></g></svg>

package/dist/svgs/actions/actions-arrow-down-start.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="m2.488 8.609 3.7-2.959A.5.5 0 0 1 7 6.04v5.919a.5.5 0 0 1-.812.39l-3.7-2.96a.5.5 0 0 1 0-.78z"/><path d="M11 4v4H6v2h7V4z"/></g></svg>

package/dist/svgs/actions/actions-arrow-end-alt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M7.843 3.05a.999.999 0 0 0 0 1.414L10.379 7H3a1 1 0 0 0 0 2h7.379l-2.536 2.536a1 1 0 0 0 1.414 1.414l3.536-3.536.707-.707a.999.999 0 0 0 0-1.414l-.707-.707L9.257 3.05a1 1 0 0 0-1.414 0z"/></g></svg>

package/dist/svgs/actions/actions-arrow-end-down-alt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M12.95 7.843a.999.999 0 0 0-1.414 0L9 10.379V3a1 1 0 0 0-1-1H3a1 1 0 0 0 0 2h4v6.379L4.464 7.843A.999.999 0 1 0 3.05 9.257l3.536 3.536.707.707a1 1 0 0 0 1.414 0l.707-.707 3.536-3.536a1 1 0 0 0 0-1.414z"/></g></svg>

package/dist/svgs/actions/actions-arrow-end-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="m8.609 13.512-2.959-3.7A.5.5 0 0 1 6.04 9h5.919a.5.5 0 0 1 .39.812l-2.96 3.7a.5.5 0 0 1-.78 0z"/><path d="M4 5h4v5h2V3H4z"/></g></svg>

package/dist/svgs/actions/actions-arrow-end-up-alt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M12.95 8.157a.999.999 0 0 1-1.414 0L9 5.621V13a1 1 0 0 1-1 1H3a1 1 0 0 1 0-2h4V5.621L4.464 8.157A.999.999 0 1 1 3.05 6.743l3.536-3.536.707-.707a1 1 0 0 1 1.414 0l.707.707 3.536 3.536a1 1 0 0 1 0 1.414z"/></g></svg>

package/dist/svgs/actions/actions-arrow-end-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="m9.391 2.488 2.959 3.7a.5.5 0 0 1-.39.812H6.04a.5.5 0 0 1-.39-.812l2.96-3.7a.5.5 0 0 1 .781 0z"/><path d="M4 11h4V6h2v7H4z"/></g></svg>

package/dist/svgs/actions/actions-arrow-end.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M2 9h7.3v2c0 .4.5.6.8.4l3.7-3c.2-.2.2-.6 0-.8l-3.7-3c-.3-.2-.8 0-.8.4v2H2v2z"/></g></svg>

package/dist/svgs/actions/actions-arrow-start-alt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M8.157 12.95a.999.999 0 0 0 0-1.414L5.621 9H13a1 1 0 0 0 0-2H5.621l2.536-2.536A1 1 0 0 0 6.743 3.05L3.207 6.586l-.707.707a.999.999 0 0 0 0 1.414l.707.707 3.536 3.536a1 1 0 0 0 1.414 0z"/></g></svg>

package/dist/svgs/actions/actions-arrow-start.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M14 7H6.7V5c0-.4-.5-.6-.8-.4l-3.7 3c-.2.2-.2.6 0 .8l3.7 3c.3.3.8 0 .8-.4V9H14V7z"/></g></svg>

package/dist/svgs/actions/actions-aspect-ratio.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M13 4c.551 0 1 .449 1 1v6c0 .551-.449 1-1 1H3c-.551 0-1-.449-1-1V5c0-.551.449-1 1-1h10m0-1H3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z"/><path d="M6 5H3.5a.5.5 0 0 0-.5.5V8h1V6h2V5ZM12 8v2h-2v1h2.5a.5.5 0 0 0 .5-.5V8h-1Z"/></g></svg>

package/dist/svgs/actions/actions-menu-sidebar-collapsed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M13 2H3a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Zm-9 8.75a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5Zm0-2a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 3 8.75v-.5A.25.25 0 0 1 3.25 8h.5a.25.25 0 0 1 .25.25v.5Zm0-2a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 3 6.75v-.5A.25.25 0 0 1 3.25 6h.5a.25.25 0 0 1 .25.25v.5Zm0-2a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 3 4.75v-.5A.25.25 0 0 1 3.25 4h.5a.25.25 0 0 1 .25.25v.5ZM14 12c0 .551-.449 1-1 1H6V3h7c.551 0 1 .449 1 1v8Z"/></g></svg>

package/dist/svgs/actions/actions-menu-sidebar-expanded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M13 2H3a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Zm-9 8.75a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5Zm0-2a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 3 8.75v-.5A.25.25 0 0 1 3.25 8h.5a.25.25 0 0 1 .25.25v.5Zm0-2a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 3 6.75v-.5A.25.25 0 0 1 3.25 6h.5a.25.25 0 0 1 .25.25v.5Zm0-2a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 3 4.75v-.5A.25.25 0 0 1 3.25 4h.5a.25.25 0 0 1 .25.25v.5Zm4 6a.25.25 0 0 1-.25.25h-2.5a.25.25 0 0 1-.25-.25v-.5a.25.25 0 0 1 .25-.25h2.5a.25.25 0 0 1 .25.25v.5Zm0-2a.25.25 0 0 1-.25.25h-2.5A.25.25 0 0 1 5 8.75v-.5A.25.25 0 0 1 5.25 8h2.5a.25.25 0 0 1 .25.25v.5Zm0-2a.25.25 0 0 1-.25.25h-2.5A.25.25 0 0 1 5 6.75v-.5A.25.25 0 0 1 5.25 6h2.5a.25.25 0 0 1 .25.25v.5Zm0-2a.25.25 0 0 1-.25.25h-2.5A.25.25 0 0 1 5 4.75v-.5A.25.25 0 0 1 5.25 4h2.5a.25.25 0 0 1 .25.25v.5ZM14 12c0 .551-.449 1-1 1h-3V3h3c.551 0 1 .449 1 1v8Z"/></g></svg>

package/gulpfile.js

@@ -4,7 +4,7 @@
 const fs = require('fs');
 const pkg = require('./package.json');
 const path = require('path');
-const del = require('del');
+const { deleteAsync, deleteSync } = require('del');
 const twig = require('gulp-twig');
 const svgmin = require('gulp-svgmin');
 const rename = require('gulp-rename');
@@ -13,6 +13,7 @@ const svgSprite = require('gulp-svg-sprite');
 const yaml = require('js-yaml');
 const merge = require('deepmerge');
 const execSync = require('child_process').execSync;
+const { exec } = require('child_process');
 
 const minifyCSS = require('gulp-clean-css');
 const sass = require('gulp-sass')(require('sass'));
@@ -224,6 +225,7 @@ function getData() {
             data.icons[identifier].category   = folder;
             data.icons[identifier].svg        = 'svgs/' + folder + '/' + identifier + '.svg';
             data.icons[identifier].sprite     = 'sprites/' + folder + '.svg' + '#' + identifier;
+            data.icons[identifier].bidi       = metaData.bidi ? true : false;
         }
     }
     return data;
@@ -240,11 +242,27 @@ function escapeSvg(svg) {
     return svg.replace(regex, c => charReplacementMap[c]);
 }
 
+function playSound() {
+    // Try different sound commands based on platform (silently)
+    const soundCommands = [
+        'echo -e "\\a"',  // Terminal bell
+        'paplay /usr/share/sounds/alsa/Front_Left.wav 2>/dev/null',  // Linux
+        'afplay /System/Library/Sounds/Glass.aiff 2>/dev/null',  // macOS
+        'powershell -c "[console]::beep(800,200)" 2>$null'  // Windows
+    ];
+
+    soundCommands.forEach(cmd => {
+        exec(cmd, { stdio: 'ignore' }, () => {}); // Completely silent
+    });
+
+    console.log('✅ Build complete!');
+}
+
 //
 // Icons Clean
 //
 gulp.task('icons-clean', () => {
-    return del([options.dist], { force: true });
+    return deleteAsync([options.dist], { force: true });
 });
 
 
@@ -289,7 +307,12 @@ gulp.task('icons-min', () => {
 gulp.task('icons-sprites', () => {
     let processFolder = (folder) => {
         return new Promise((resolve, reject) => {
-            gulp.src([path.join(options.dist_svgs, folder) + '/*.svg'])
+            // Get sorted list of SVG files
+            const svgFiles = getIcons(path.join(options.dist_svgs, folder))
+                .sort()
+                .map(file => path.join(options.dist_svgs, folder, file));
+
+            gulp.src(svgFiles)
                 .pipe(svgSprite({
                     svg: {
                         rootAttributes: {
@@ -339,33 +362,76 @@ gulp.task('icons-sprites', () => {
 //
 gulp.task('icons-data', (cb) => {
     let data = JSON.stringify(getData(), null, 2);
-    fs.writeFile(options.dist + 'icons.json', data, 'utf8', () => {
-        cb();
+    fs.writeFile(options.dist + 'icons.json', data, 'utf8', (err) => {
+        if (err) {
+            cb(err);
+        } else {
+            cb();
+        }
     });
 });
 
 //
 // Icon variables
 //
-gulp.task('icons-variables', (cb) => {
-    const data = getData();
+gulp.task('icons-variables', async (cb) => {
+    try {
+        const data = getData();
 
-    if (!fs.existsSync(options.dist_scss)){
-        fs.mkdirSync(options.dist_scss);
-    }
+        if (!fs.existsSync(options.dist_scss)){
+            fs.mkdirSync(options.dist_scss, { recursive: true });
+        }
 
-    for (const [identifier, icon] of Object.entries(data.icons)) {
-        const inlineIcon = fs.readFileSync(path.join(options.dist, icon.svg), 'utf8');
-        const scssVariable = `$icon-${identifier}: url("data:image/svg+xml,${escapeSvg(inlineIcon)}") !default;`;
-        fs.appendFileSync(options.dist_scss + `icons-variables-${icon.category}.scss`, scssVariable + "\n", 'utf8');
-    }
+        // Clear existing files first
+        const categories = getCategories();
+        for (const category of Object.values(categories)) {
+            const categoryFile = options.dist_scss + `icons-variables-${category.identifier}.scss`;
+            if (fs.existsSync(categoryFile)) {
+                fs.unlinkSync(categoryFile);
+            }
+        }
+        const mainFile = options.dist_scss + `icons-variables.scss`;
+        if (fs.existsSync(mainFile)) {
+            fs.unlinkSync(mainFile);
+        }
+
+        // Write icon variables (sorted by identifier)
+        const sortedIcons = Object.entries(data.icons).sort(([a], [b]) => a.localeCompare(b));
+        const categoryFiles = {};
 
-    const categories = getCategories();
-    for (const category of Object.values(categories)) {
-        const scssInclude = `@import 'icons-variables-${category.identifier}';`;
-        fs.appendFileSync(options.dist_scss + `icons-variables.scss`, scssInclude + "\n", 'utf8');
+        // Group by category and prepare content
+        for (const [identifier, icon] of sortedIcons) {
+            if (!categoryFiles[icon.category]) {
+                categoryFiles[icon.category] = [];
+            }
+            const inlineIcon = fs.readFileSync(path.join(options.dist, icon.svg), 'utf8');
+            const scssVariable = `$icon-${identifier}: url("data:image/svg+xml,${escapeSvg(inlineIcon)}") !default;`;
+            categoryFiles[icon.category].push(scssVariable);
+        }
+
+        // Write each category file with sorted content
+        const writePromises = [];
+        for (const [category, variables] of Object.entries(categoryFiles)) {
+            writePromises.push(
+                new Promise((resolve, reject) => {
+                    fs.writeFile(options.dist_scss + `icons-variables-${category}.scss`, variables.join('\n') + '\n', 'utf8', (err) => {
+                        if (err) reject(err);
+                        else resolve();
+                    });
+                })
+            );
+        }
+
+        await Promise.all(writePromises);
+
+        // Write main imports file (sequentially to maintain order)
+        const sortedCategories = Object.values(categories).sort((a, b) => a.identifier.localeCompare(b.identifier));
+        const imports = sortedCategories.map(category => `@import 'icons-variables-${category.identifier}';`).join('\n') + '\n';
+        await fs.promises.writeFile(options.dist_scss + `icons-variables.scss`, imports, 'utf8');
+        cb();
+    } catch (err) {
+        cb(err);
     }
-    cb();
 });
 
 
@@ -385,7 +451,7 @@ gulp.task('version-history', () => {
                 let identifier = path.basename(file, '.yaml');
                 fs.stat(path.join(options.src, folder, identifier + '.svg'), (error) => {
                     if (error !== null && error.code === 'ENOENT') {
-                        del(path.join(options.meta, file), { force: true });
+                        deleteSync(path.join(options.meta, file), { force: true });
                     }
                 });
             }
@@ -410,112 +476,332 @@ gulp.task('version-history', () => {
 });
 
 
+//
+// Changelog Helper Functions
+//
+const COMMIT_TYPES = {
+    'FEATURE': 'features',
+    'BUGFIX': 'bugfixes',
+    'TASK': 'tasks',
+    '!!!': 'breaking',
+    'BREAKING': 'breaking'
+};
+
+function categorizeCommits(latestTag) {
+    const gitCommand = `git log ${latestTag}..HEAD --oneline --no-merges --grep="^\\[RELEASE\\]" --invert-grep`;
+    const commits = execSync(gitCommand).toString().trim();
+
+    if (!commits) {
+        return null;
+    }
+
+    const categories = {
+        breaking: [],
+        features: [],
+        bugfixes: [],
+        tasks: [],
+        other: []
+    };
+
+    const commitPattern = /^([a-f0-9]+)\s+\[([^\]]+)\]\s+(.+)$/;
+    const fallbackPattern = /^([a-f0-9]+)\s+(.+)$/;
+
+    commits.split('\n').forEach(line => {
+        const match = line.match(commitPattern);
+
+        if (match) {
+            const [, hash, prefix, message] = match;
+            const category = COMMIT_TYPES[prefix.toUpperCase()] || 'other';
+            categories[category].push({ hash, prefix, message });
+        } else {
+            const fallbackMatch = line.match(fallbackPattern);
+            if (fallbackMatch) {
+                const [, hash, message] = fallbackMatch;
+                categories.other.push({ hash, prefix: null, message });
+            }
+        }
+    });
+
+    return categories;
+}
+
+//
+// Update CHANGELOG.md file (used by npm version hook)
+//
+gulp.task('changelog-file', (cb) => {
+    try {
+        const pkg = require('./package.json');
+        const newVersion = pkg.version;
+
+        // Get the latest tag (before the new one)
+        const latestTag = execSync('git tag --sort=-v:refname | head -n1').toString().trim();
+
+        if (!latestTag) {
+            console.log('No previous tags found, skipping changelog update');
+            cb();
+            return;
+        }
+
+        const categories = categorizeCommits(latestTag);
+
+        if (!categories) {
+            console.log(`No new commits since ${latestTag}`);
+            cb();
+            return;
+        }
+
+        // Combine all commits in order: breaking, features, bugfixes, tasks, other
+        const allCommits = [
+            ...categories.breaking,
+            ...categories.features,
+            ...categories.bugfixes,
+            ...categories.tasks,
+            ...categories.other
+        ];
+
+        // Output preview to console
+        console.log('\n' + '='.repeat(60));
+        console.log(`Adding to CHANGELOG.md for version ${newVersion}`);
+        console.log('='.repeat(60) + '\n');
+
+        allCommits.forEach(item => {
+            if (item.prefix) {
+                console.log(`${item.hash} [${item.prefix}] ${item.message}`);
+            } else {
+                console.log(`${item.hash} ${item.message}`);
+            }
+        });
+
+        console.log('\n' + '='.repeat(60) + '\n');
+
+        // Build the new changelog entry
+        const date = new Date().toISOString().split('T')[0];
+        let entry = `## [${newVersion}] - ${date}\n\n`;
+
+        allCommits.forEach(item => {
+            if (item.prefix) {
+                entry += `${item.hash} [${item.prefix}] ${item.message}\n`;
+            } else {
+                entry += `${item.hash} ${item.message}\n`;
+            }
+        });
+
+        entry += '\n';
+
+        // Read existing CHANGELOG.md or create new one
+        let changelog = '';
+        const changelogPath = './CHANGELOG.md';
+
+        if (fs.existsSync(changelogPath)) {
+            changelog = fs.readFileSync(changelogPath, 'utf8');
+
+            // Insert new entry after the header
+            const lines = changelog.split('\n');
+            const headerEndIndex = lines.findIndex((line, i) => i > 0 && line.startsWith('##'));
+
+            if (headerEndIndex !== -1) {
+                lines.splice(headerEndIndex, 0, entry);
+                changelog = lines.join('\n');
+            } else {
+                changelog = changelog + '\n' + entry;
+            }
+        } else {
+            // Create new changelog with header
+            changelog = `# Changelog\n\nAll notable changes to this project will be documented in this file.\n\nThe format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).\n\n${entry}`;
+        }
+
+        // Write the updated changelog
+        fs.writeFileSync(changelogPath, changelog);
+        console.log(`✓ Updated CHANGELOG.md for version ${newVersion}`);
+
+        cb();
+    } catch (error) {
+        console.error('Error updating changelog:', error.message);
+        cb(error);
+    }
+});
+
 /**
  * Docs
  */
 gulp.task('site-clean', () => {
-    return del([options.site], { force: true });
+    return deleteAsync([options.site], { force: true });
 });
 gulp.task('site-build', function (cb) {
+    let tasks = [];
 
     // Build Docs CSS
-    gulp.src(path.join(options.assets, 'scss/docs.scss'))
-        .pipe(sass().on('error', sass.logError))
-        .pipe(minifyCSS())
-        .pipe(gulp.dest(path.join(options.site, 'assets', 'css')))
+    tasks.push(new Promise((resolve, reject) => {
+        gulp.src(path.join(options.assets, 'scss/docs.scss'))
+            .pipe(sass().on('error', sass.logError))
+            .pipe(minifyCSS())
+            .pipe(gulp.dest(path.join(options.site, 'assets', 'css')))
+            .on('end', resolve)
+            .on('error', reject);
+    }));
 
     // Copy static assets
-    gulp.src([path.join(options.assets, '**/*'),
-            '!' + path.join(options.assets, '**/*(*.scss)'),
-        ], { base: options.assets })
-        .pipe(gulp.dest(path.join(options.site, 'assets')));
-    gulp.src([path.join(options.dist, '**/*')], { base: options.dist } )
-        .pipe(gulp.dest(path.join(options.site, 'dist')));
-
-    // Fetch generated data
-    let typo3 = JSON.parse(fs.readFileSync('./typo3.json', 'utf8'))
-    let categories = getCategories();
-    let data = JSON.parse(fs.readFileSync(options.dist + 'icons.json', 'utf8'));
-    let icons = data.icons;
-    for (let iconKey in icons) {
-        const iconContent = fs.readFileSync(path.join(options.dist, icons[iconKey].svg), 'utf8');
-        icons[iconKey]._meta = getMetaData(icons[iconKey].identifier, icons[iconKey].category);
-        icons[iconKey]._inline = iconContent
-        icons[iconKey]._inlineEscaped = escapeSvg(iconContent)
-    }
+    tasks.push(new Promise((resolve, reject) => {
+        gulp.src([path.join(options.assets, '**/*'),
+                '!' + path.join(options.assets, '**/*(*.scss)'),
+            ], { base: options.assets })
+            .pipe(gulp.dest(path.join(options.site, 'assets')))
+            .on('end', resolve)
+            .on('error', reject);
+    }));
 
-    // Index
-    gulp.src('./tmpl/html/docs/index.html.twig')
-        .pipe(twig({
-            data: {
-                pkg: pkg,
-                typo3: typo3,
-                icons: icons,
-                category: {},
-                categories: categories,
-                rendering: {},
-                pathPrefix: '',
-            }
-        }))
-        .pipe(rename('index.html'))
-        .pipe(gulp.dest(path.join(options.site)));
-
-    // Guide
-    gulp.src('./tmpl/html/docs/guide.html.twig')
-        .pipe(twig({
-            data: {
-                pkg: pkg,
-                typo3: typo3,
-                icons: icons,
-                category: {},
-                categories: categories,
-                rendering: {},
-                pathPrefix: '',
-            }
-        }))
-        .pipe(rename('guide.html'))
-        .pipe(gulp.dest(path.join(options.site)));
-
-    // Build pages
-    for (let categoryKey in categories) {
-        let category = categories[categoryKey];
-        gulp.src('./tmpl/html/docs/section.html.twig')
-            .pipe(twig({
-                data: {
-                    pkg: pkg,
-                    typo3: typo3,
-                    icons: icons,
-                    category: category,
-                    categories: categories,
-                    pathPrefix: '../',
-                }
-            }))
-            .pipe(rename(category.identifier + '.html'))
-            .pipe(gulp.dest(path.join(options.site, 'icons')));
-        for (let iconKey in category.icons) {
-            let iconIdentifier = category.icons[iconKey];
-            let icon = icons[iconIdentifier];
-            gulp.src('./tmpl/html/docs/single.html.twig')
+    tasks.push(new Promise((resolve, reject) => {
+        gulp.src([path.join(options.dist, '**/*')], { base: options.dist } )
+            .pipe(gulp.dest(path.join(options.site, 'dist')))
+            .on('end', resolve)
+            .on('error', reject);
+    }));
+
+    // Wait for asset copying to complete before processing templates
+    Promise.all(tasks).then(() => {
+        let templateTasks = [];
+
+        // Fetch generated data
+        let typo3 = JSON.parse(fs.readFileSync('./typo3.json', 'utf8'))
+        let categories = getCategories();
+        let data = JSON.parse(fs.readFileSync(options.dist + 'icons.json', 'utf8'));
+        let icons = data.icons;
+        for (let iconKey in icons) {
+            const iconContent = fs.readFileSync(path.join(options.dist, icons[iconKey].svg), 'utf8');
+            icons[iconKey]._meta = getMetaData(icons[iconKey].identifier, icons[iconKey].category);
+            icons[iconKey]._inline = iconContent
+            icons[iconKey]._inlineEscaped = escapeSvg(iconContent)
+        }
+
+        // Index
+        templateTasks.push(new Promise((resolve, reject) => {
+            gulp.src('./tmpl/html/docs/index.html.twig')
+                .pipe(twig({
+                    data: {
+                        pkg: pkg,
+                        typo3: typo3,
+                        icons: icons,
+                        category: {},
+                        categories: categories,
+                        rendering: {},
+                        pathPrefix: '',
+                    }
+                }))
+                .pipe(rename('index.html'))
+                .pipe(gulp.dest(path.join(options.site)))
+                .on('end', resolve)
+                .on('error', reject);
+        }));
+
+        // Guide
+        templateTasks.push(new Promise((resolve, reject) => {
+            gulp.src('./tmpl/html/docs/guide.html.twig')
                 .pipe(twig({
                     data: {
                         pkg: pkg,
                         typo3: typo3,
-                        icon: icon,
                         icons: icons,
-                        category: category,
+                        category: {},
                         categories: categories,
-                        pathPrefix: '../../',
+                        rendering: {},
+                        pathPrefix: '',
                     }
                 }))
-                .pipe(rename(iconIdentifier + '.html'))
-                .pipe(gulp.dest(path.join(options.site, 'icons', category.identifier)));
+                .pipe(rename('guide.html'))
+                .pipe(gulp.dest(path.join(options.site)))
+                .on('end', resolve)
+                .on('error', reject);
+        }));
+
+        // Build pages
+        for (let categoryKey in categories) {
+            let category = categories[categoryKey];
+            templateTasks.push(new Promise((resolve, reject) => {
+                gulp.src('./tmpl/html/docs/section.html.twig')
+                    .pipe(twig({
+                        data: {
+                            pkg: pkg,
+                            typo3: typo3,
+                            icons: icons,
+                            category: category,
+                            categories: categories,
+                            pathPrefix: '../',
+                        }
+                    }))
+                    .pipe(rename(category.identifier + '.html'))
+                    .pipe(gulp.dest(path.join(options.site, 'icons')))
+                    .on('end', resolve)
+                    .on('error', reject);
+            }));
+
+            for (let iconKey in category.icons) {
+                let iconIdentifier = category.icons[iconKey];
+                let icon = icons[iconIdentifier];
+                templateTasks.push(new Promise((resolve, reject) => {
+                    gulp.src('./tmpl/html/docs/single.html.twig')
+                        .pipe(twig({
+                            data: {
+                                pkg: pkg,
+                                typo3: typo3,
+                                icon: icon,
+                                icons: icons,
+                                category: category,
+                                categories: categories,
+                                pathPrefix: '../../',
+                            }
+                        }))
+                        .pipe(rename(iconIdentifier + '.html'))
+                        .pipe(gulp.dest(path.join(options.site, 'icons', category.identifier)))
+                        .on('end', resolve)
+                        .on('error', reject);
+                }));
+            }
         }
-    }
 
-    cb();
+        Promise.all(templateTasks).then(() => {
+            cb();
+        }).catch(cb);
+    }).catch(cb);
 });
 
 
+//
+// Watch Task with completion callbacks
+//
+function svgNotify(cb) {
+    playSound();
+    cb();
+}
+
+function scssNotify(cb) {
+    playSound();
+    cb();
+}
+
+function templateNotify(cb) {
+    playSound();
+    cb();
+}
+
+gulp.task('watch-svg-complete', gulp.series('icons-min', 'icons-sprites', 'icons-data', 'icons-variables', 'site-build', svgNotify));
+
+gulp.task('watch-scss-complete', gulp.series('icons-sass', 'site-build', scssNotify));
+
+gulp.task('watch-template-complete', gulp.series('site-build', templateNotify));
+
+gulp.task('watch', () => {
+    // Watch SVG source files
+    gulp.watch([options.src + '**/*.svg'], gulp.series('watch-svg-complete'));
+
+    // Watch SCSS files
+    gulp.watch([options.assets + 'scss/**/*.scss'], gulp.series('watch-scss-complete'));
+
+    // Watch template files
+    gulp.watch(['./tmpl/**/*.twig', './typo3.json'], gulp.series('watch-template-complete'));
+
+    console.log('🔍 Watching for file changes...');
+});
+
 //
 // Tasks
 //
@@ -537,3 +823,8 @@ gulp.task('site', gulp.series(
     'site-clean',
     'site-build'
 ));
+gulp.task('dev', gulp.series(
+    'icons',
+    'site',
+    'watch'
+));

package/meta/actions/actions-accessibility.yaml

@@ -39,5 +39,6 @@ changes:
   - 4.3.0
   - 4.3.1
   - 4.3.2
+  - 4.3.3
 tags:
   - a11y

package/meta/actions/actions-approve.yaml

@@ -41,4 +41,5 @@ changes:
   - 4.3.0
   - 4.3.1
   - 4.3.2
+  - 4.3.3
 tags: []