desy-html 16.0.4 → 17.0.0

package/branding/BRANDING.md

@@ -1,398 +1,398 @@
-# desy-html Branding System
-
-desy-html includes a brand customization system that allows adapting the design system for different government organizations.
-
-## Quick Setup
-
-### Step 1: Edit Configuration
-
-Edit `branding/branding.config.js` with your organization's information:
-
-```javascript
-export default {
-  organization: {
-    name: 'My Organization',
-    website: 'https://my-site.gov',
-  },
-  logos: {
-    organization: {
-      compact: '/branding/logos/my-logo-compact.svg',
-      expanded: '/branding/logos/my-logo-expanded.svg',
-      mini: '/branding/logos/my-logo-mini.svg',
-      alt: 'My Organization',
-    },
-    eu: {
-      eu: '/branding/logos/eu/logo-eu.svg',
-      feder: '/branding/logos/eu/logo-feder.svg',
-      fse: '/branding/logos/eu/logo-fse.svg',
-      feader: '/branding/logos/eu/logo-feader.svg',
-      plurifondo: '/branding/logos/eu/logo-plurifondo.svg',
-    },
-  },
-  favicon: {
-    svg: '/branding/logos/favicon.svg',
-    ico: '/branding/logos/favicon.ico',
-    appleTouch: '/branding/logos/apple-touch-icon.png'
-  },
-};
-```
-
-### Step 2: Replace Logos
-
-Place your organization's logos in `/branding/logos/`:
-
-- `my-logo-compact.svg` - Compact logo (icon only) for mobile header
-- `my-logo-expanded.svg` - Expanded logo (icon + text) for desktop header
-- `my-logo-mini.svg` - Mini logo (icon + text) for header-mini component
-
-### Step 3: Rebuild
-
-```bash
-npm run build
-```
-
-## Build-time vs Runtime
-
-The branding system supports two customization modes:
-
-### Build-time (Recommended)
-
-Changes to `branding/branding.config.js` are applied during the build process. This is the most efficient option for permanent customizations.
-
-**Advantages:**
-- Better performance (no additional processing on the client)
-- Values are injected directly into templates
-- No flickering during page load
-
-**Usage:** Simply edit `branding/branding.config.js` and run `npm run build`.
-
-## Configuration Reference
-
-### organization
-
-Organization information.
-
-| Field | Type | Required | Description |
-|-------|------|----------|-------------|
-| `name` | string | Yes | Full organization name |
-| `nameShort` | string | No | Short name for limited spaces |
-| `website` | string | Yes | Main website URL |
-| `contact.address` | string | No | Postal address |
-| `contact.city` | string | No | City and postal code |
-| `contact.phone` | string | No | Phone number to display |
-| `contact.phoneLink` | string | No | Phone in international format (+34...) |
-
-### logos
-
-Logo configuration.
-
-| Field | Type | Required | Description |
-|-------|------|----------|-------------|
-| `logos.organization.compact` | string | Yes | Compact logo (icon only) for mobile/responsive header |
-| `logos.organization.expanded` | string | Yes | Expanded logo (icon + text) for desktop header |
-| `logos.organization.mini` | string | Yes | Mini logo (icon + text) for header-mini component |
-| `logos.organization.alt` | string | Yes | Alternative text |
-| `logos.eu.eu` | string | No | European Union logo |
-| `logos.eu.feder` | string | No | FEDER logo |
-| `logos.eu.fse` | string | No | FSE+ logo |
-| `logos.eu.feader` | string | No | FEADER logo |
-| `logos.eu.plurifondo` | string | No | Plurifondo logo |
-
-### footer
-
-Footer configuration.
-
-| Field | Type | Required | Description |
-|-------|------|----------|-------------|
-| `license.name` | string | No | License name (e.g., "CC BY 4.0") |
-| `license.url` | string | No | URL to full license text |
-| `license.text` | string | No | Text preceding the link |
-| `euFundsUrl` | string | No | URL to European funds page |
-
-### colors
-
-Brand colors.
-
-| Field | Type | Required | Description |
-|-------|------|----------|-------------|
-| `primary.base` | string | No | Main primary color |
-| `primary.light` | string | No | Light variant (backgrounds) |
-| `primary.dark` | string | No | Dark variant (hover) |
-
-### typography
-
-Font configuration.
-
-| Field | Type | Required | Description |
-|-------|------|----------|-------------|
-| `fontFamily.sans` | string | No | Sans-serif font family |
-| `fontFamily.heading` | string | No | Heading font family |
-| `fontUrl` | string | No | URL to load fonts (e.g., Google Fonts) |
-
-### images
-
-Additional images.
-
-| Field | Type | Required | Description |
-|-------|------|----------|-------------|
-| `headerBackground` | string | No | Header background image |
-| `headerBackgroundLg` | string | No | Large header background image |
-
-### favicon
-
-Favicon configuration for browser tabs and mobile devices.
-
-| Field              | Type   | Required | Size      | Description                                                |
-| ------------------ | ------ | -------- | --------- | ---------------------------------------------------------- |
-| `favicon.svg`        | string | Yes      | 32×32     | Main favicon in SVG format (modern browsers)               |
-| `favicon.ico`        | string | Yes      | 32×32     | Legacy favicon in ICO format (fallback for older browsers) |
-| `favicon.appleTouch` | string | Yes      | 180×180   | Apple Touch Icon for iOS home screen                       |
-
-> **Note:** For optimal compatibility, use the following sizes: 32×32 for browser tabs (both SVG and ICO), and 180×180 for Apple Touch Icon. The vite-branding-plugin automatically copies favicon files to `/dist/images/` during build and rewrites the HTML paths:
-> - `favicon.svg` → `/dist/images/favicon.svg`
-> - `favicon.ico` → `/dist/images/favicon.ico`
-> - `apple-touch-icon.png` → `/dist/images/apple-touch-icon.png`
-
-## CSS Variables
-
-The following CSS variables are available for runtime customization:
-
-```css
-:root {
-  /* Primary colors */
-  --branding-primary-base: #00607a;
-  --branding-primary-light: #d6eaf0;
-  --branding-primary-dark: #00475c;
-
-  /* Logo URLs */
-  --branding-logo-expanded: url('/branding/logos/...');
-  --branding-logo-mini: url('/branding/logos/...');
-  --branding-logo-compact: url('/branding/logos/...');
-}
-```
-
-## Configuration Examples
-
-### YourOrganization
-
-```javascript
-export default {
-  organization: {
-    name: 'YourOrganization',
-    website: 'https://www.example.com/',
-  },
-  logos: {
-    organization: {
-      compact: '/branding/logos/yourlogo-compact.svg',
-      expanded: '/branding/logos/yourlogo-expanded.svg',
-      mini: '/branding/logos/yourlogo-mini.svg',
-      alt: 'YourOrganization',
-    },
-    eu: {
-      eu: '/branding/logos/eu/logo-eu.svg',
-      feder: '/branding/logos/eu/logo-feder.svg',
-      fse: '/branding/logos/eu/logo-fse.svg',
-      feader: '/branding/logos/eu/logo-feader.svg',
-      plurifondo: '/branding/logos/eu/logo-plurifondo.svg',
-    },
-  },
-  typography: {
-    fontFamily: {
-      sans: '"Nunito", ui-sans-serif, system-ui, sans-serif',
-      heading: '"Inter", ui-sans-serif, system-ui, sans-serif',
-    },
-    fontUrl: 'https://fonts.googleapis.com/css2?family=Inter:wght@700&family=Nunito:wght@400;500;600;700&display=swap',
-  },
-};
-```
-
-## FAQ
-
-### What fields are required?
-
-You only need:
-- `organization.name`
-- `organization.website`
-- `logos.organization.compact`
-- `logos.organization.expanded`
-- `logos.organization.mini`
-- `logos.organization.alt`
-- `favicon.svg`
-- `favicon.ico`
-- `favicon.appleTouch`
-
-See `branding/branding.config.yourorganization.js` for a minimal example.
-
-### What format should the logos be in?
-
-SVG is the recommended format for its scalability and performance. PNG and JPG are also supported. See the dimensions table above for recommended sizes.
-
-### Can I use different logos for desktop and mobile?
-
-Yes. Use:
-- `logos.organization.expanded` for desktop (icon + text)
-- `logos.organization.compact` for mobile (icon only)
-- `logos.organization.mini` for header-mini component (icon + text)
-
-### Are European funds mandatory?
-
-No. The `logos.eu` section is optional and only needed if your project receives European funding. Place your EU logos in `branding/logos/eu/`.
-
-### Where can I find complete examples?
-
-- `branding/branding.config.yourorganization.js` - Minimal configuration
-- `branding/branding.config.js` - Current project configuration (Gobierno de Aragón)
-
-## Uso en Proyectos Externos
-
-Puedes importar y utilizar el sistema de branding de desy-html en tus propios proyectos que dependan de `desy-html`.
-
-### Requisitos
-
-Asegúrate de tener `desy-html` instalado:
-
-```bash
-npm install desy-html
-```
-
-### Importar el plugin
-
-```javascript
-// vite.config.js
-import { brandingPlugin, loadBrandingConfig } from 'desy-html/branding/plugin';
-```
-
-### Configuración básica
-
-```javascript
-// vite.config.js
-import { brandingPlugin, loadBrandingConfig } from 'desy-html/branding/plugin';
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-  plugins: [
-    brandingPlugin(miConfiguracionBranding),
-    // ... otros plugins
-  ]
-});
-```
-
-### Cargar configuración desde archivo
-
-Puedes cargar la configuración desde un archivo `branding/branding.config.js` en tu proyecto:
-
-```javascript
-// vite.config.js
-import { brandingPlugin, loadBrandingConfig } from 'desy-html/branding/plugin';
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-  plugins: [
-    brandingPlugin(await loadBrandingConfig('default', process.cwd())),
-    // ... otros plugins
-  ]
-});
-```
-
-### Con variable de entorno
-
-```javascript
-// vite.config.js
-import { brandingPlugin, loadBrandingConfig } from 'desy-html/branding/plugin';
-import { defineConfig } from 'vite';
-
-const brandingConfig = await loadBrandingConfig(
-  process.env.BRANDING_CONFIG || 'default',
-  process.cwd()
-);
-
-export default defineConfig({
-  plugins: [
-    brandingPlugin(brandingConfig),
-    // ... otros plugins
-  ]
-});
-```
-
-### Estructura de configuración
-
-La configuración sigue la misma estructura que en desy-html:
-
-```javascript
-// branding/branding.config.js
-export default {
-  organization: {
-    name: 'Mi Organización',
-    website: 'https://mi-web.gob.es',
-    contact: {
-      address: 'Calle Principal, 1',
-      city: '01000 - Ciudad',
-      phone: '900 123 456',
-      phoneLink: '+34900123456',
-    },
-  },
-
-  logos: {
-    organization: {
-      compact: '/branding/logos/mi-logo-compact.svg',
-      mini: '/branding/logos/mi-logo-mini.svg',
-      expanded: '/branding/logos/mi-logo-expanded.svg',
-      alt: 'Mi Organización',
-    },
-  },
-
-  footer: {
-    license: {
-      name: 'CC BY 4.0',
-      url: 'https://creativecommons.org/licenses/by/4.0/',
-      text: 'Todo el contenido bajo licencia',
-    },
-    euFundsUrl: 'https://mi-web.gob.es/fondos-europeos',
-  },
-
-  typography: {
-    fontFamily: {
-      sans: '"Inter", ui-sans-serif, system-ui, sans-serif',
-      heading: '"Inter", ui-sans-serif, system-ui, sans-serif',
-    },
-    fontUrl: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap',
-  },
-
-  images: {
-    headerBackground: '/branding/images/header-background.svg',
-    headerBackgroundLg: '/branding/images/header-background-lg.svg',
-  },
-
-  favicon: {
-    svg: '/branding/logos/favicon.svg',
-    ico: '/branding/logos/favicon.ico',
-    appleTouch: '/branding/logos/apple-touch-icon.png',
-  },
-};
-```
-
-### Logos
-
-Los logos deben colocarse en la carpeta `branding/logos/` de tu proyecto:
-
-```
-mi-proyecto/
-├── branding/
-│   ├── logos/
-│   │   ├── mi-logo-compact.svg
-│   │   ├── mi-logo-mini.svg
-│   │   ├── mi-logo-expanded.svg
-│   │   ├── eu/
-│   │   │   ├── logo-eu.svg
-│   │   │   ├── logo-feder.svg
-│   │   │   ├── logo-fse.svg
-│   │   │   ├── logo-feader.svg
-│   │   │   └── logo-plurifondo.svg
-│   ├── images/
-│   │   ├── header-background.svg
-│   │   └── header-background-lg.svg
-│   └── branding.config.js
-└── vite.config.js
-```
-
-Los componentes de desy-html usarán automáticamente estos logos cuando estén configurados en `branding/branding.config.js`.
+# desy-html Branding System
+
+desy-html includes a brand customization system that allows adapting the design system for different government organizations.
+
+## Quick Setup
+
+### Step 1: Edit Configuration
+
+Edit `branding/branding.config.js` with your organization's information:
+
+```javascript
+export default {
+  organization: {
+    name: 'My Organization',
+    website: 'https://my-site.gov',
+  },
+  logos: {
+    organization: {
+      compact: '/branding/logos/my-logo-compact.svg',
+      expanded: '/branding/logos/my-logo-expanded.svg',
+      mini: '/branding/logos/my-logo-mini.svg',
+      alt: 'My Organization',
+    },
+    eu: {
+      eu: '/branding/logos/eu/logo-eu.svg',
+      feder: '/branding/logos/eu/logo-feder.svg',
+      fse: '/branding/logos/eu/logo-fse.svg',
+      feader: '/branding/logos/eu/logo-feader.svg',
+      plurifondo: '/branding/logos/eu/logo-plurifondo.svg',
+    },
+  },
+  favicon: {
+    svg: '/branding/logos/favicon.svg',
+    ico: '/branding/logos/favicon.ico',
+    appleTouch: '/branding/logos/apple-touch-icon.png'
+  },
+};
+```
+
+### Step 2: Replace Logos
+
+Place your organization's logos in `/branding/logos/`:
+
+- `my-logo-compact.svg` - Compact logo (icon only) for mobile header
+- `my-logo-expanded.svg` - Expanded logo (icon + text) for desktop header
+- `my-logo-mini.svg` - Mini logo (icon + text) for header-mini component
+
+### Step 3: Rebuild
+
+```bash
+npm run build
+```
+
+## Build-time vs Runtime
+
+The branding system supports two customization modes:
+
+### Build-time (Recommended)
+
+Changes to `branding/branding.config.js` are applied during the build process. This is the most efficient option for permanent customizations.
+
+**Advantages:**
+- Better performance (no additional processing on the client)
+- Values are injected directly into templates
+- No flickering during page load
+
+**Usage:** Simply edit `branding/branding.config.js` and run `npm run build`.
+
+## Configuration Reference
+
+### organization
+
+Organization information.
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `name` | string | Yes | Full organization name |
+| `nameShort` | string | No | Short name for limited spaces |
+| `website` | string | Yes | Main website URL |
+| `contact.address` | string | No | Postal address |
+| `contact.city` | string | No | City and postal code |
+| `contact.phone` | string | No | Phone number to display |
+| `contact.phoneLink` | string | No | Phone in international format (+34...) |
+
+### logos
+
+Logo configuration.
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `logos.organization.compact` | string | Yes | Compact logo (icon only) for mobile/responsive header |
+| `logos.organization.expanded` | string | Yes | Expanded logo (icon + text) for desktop header |
+| `logos.organization.mini` | string | Yes | Mini logo (icon + text) for header-mini component |
+| `logos.organization.alt` | string | Yes | Alternative text |
+| `logos.eu.eu` | string | No | European Union logo |
+| `logos.eu.feder` | string | No | FEDER logo |
+| `logos.eu.fse` | string | No | FSE+ logo |
+| `logos.eu.feader` | string | No | FEADER logo |
+| `logos.eu.plurifondo` | string | No | Plurifondo logo |
+
+### footer
+
+Footer configuration.
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `license.name` | string | No | License name (e.g., "CC BY 4.0") |
+| `license.url` | string | No | URL to full license text |
+| `license.text` | string | No | Text preceding the link |
+| `euFundsUrl` | string | No | URL to European funds page |
+
+### colors
+
+Brand colors.
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `primary.base` | string | No | Main primary color |
+| `primary.light` | string | No | Light variant (backgrounds) |
+| `primary.dark` | string | No | Dark variant (hover) |
+
+### typography
+
+Font configuration.
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `fontFamily.sans` | string | No | Sans-serif font family |
+| `fontFamily.heading` | string | No | Heading font family |
+| `fontUrl` | string | No | URL to load fonts (e.g., Google Fonts) |
+
+### images
+
+Additional images.
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `headerBackground` | string | No | Header background image |
+| `headerBackgroundLg` | string | No | Large header background image |
+
+### favicon
+
+Favicon configuration for browser tabs and mobile devices.
+
+| Field              | Type   | Required | Size      | Description                                                |
+| ------------------ | ------ | -------- | --------- | ---------------------------------------------------------- |
+| `favicon.svg`        | string | Yes      | 32×32     | Main favicon in SVG format (modern browsers)               |
+| `favicon.ico`        | string | Yes      | 32×32     | Legacy favicon in ICO format (fallback for older browsers) |
+| `favicon.appleTouch` | string | Yes      | 180×180   | Apple Touch Icon for iOS home screen                       |
+
+> **Note:** For optimal compatibility, use the following sizes: 32×32 for browser tabs (both SVG and ICO), and 180×180 for Apple Touch Icon. The vite-branding-plugin automatically copies favicon files to `/dist/images/` during build and rewrites the HTML paths:
+> - `favicon.svg` → `/dist/images/favicon.svg`
+> - `favicon.ico` → `/dist/images/favicon.ico`
+> - `apple-touch-icon.png` → `/dist/images/apple-touch-icon.png`
+
+## CSS Variables
+
+The following CSS variables are available for runtime customization:
+
+```css
+:root {
+  /* Primary colors */
+  --branding-primary-base: #00607a;
+  --branding-primary-light: #d6eaf0;
+  --branding-primary-dark: #00475c;
+
+  /* Logo URLs */
+  --branding-logo-expanded: url('/branding/logos/...');
+  --branding-logo-mini: url('/branding/logos/...');
+  --branding-logo-compact: url('/branding/logos/...');
+}
+```
+
+## Configuration Examples
+
+### YourOrganization
+
+```javascript
+export default {
+  organization: {
+    name: 'YourOrganization',
+    website: 'https://www.example.com/',
+  },
+  logos: {
+    organization: {
+      compact: '/branding/logos/yourlogo-compact.svg',
+      expanded: '/branding/logos/yourlogo-expanded.svg',
+      mini: '/branding/logos/yourlogo-mini.svg',
+      alt: 'YourOrganization',
+    },
+    eu: {
+      eu: '/branding/logos/eu/logo-eu.svg',
+      feder: '/branding/logos/eu/logo-feder.svg',
+      fse: '/branding/logos/eu/logo-fse.svg',
+      feader: '/branding/logos/eu/logo-feader.svg',
+      plurifondo: '/branding/logos/eu/logo-plurifondo.svg',
+    },
+  },
+  typography: {
+    fontFamily: {
+      sans: '"Nunito", ui-sans-serif, system-ui, sans-serif',
+      heading: '"Inter", ui-sans-serif, system-ui, sans-serif',
+    },
+    fontUrl: 'https://fonts.googleapis.com/css2?family=Inter:wght@700&family=Nunito:wght@400;500;600;700&display=swap',
+  },
+};
+```
+
+## FAQ
+
+### What fields are required?
+
+You only need:
+- `organization.name`
+- `organization.website`
+- `logos.organization.compact`
+- `logos.organization.expanded`
+- `logos.organization.mini`
+- `logos.organization.alt`
+- `favicon.svg`
+- `favicon.ico`
+- `favicon.appleTouch`
+
+See `branding/branding.config.yourorganization.js` for a minimal example.
+
+### What format should the logos be in?
+
+SVG is the recommended format for its scalability and performance. PNG and JPG are also supported. See the dimensions table above for recommended sizes.
+
+### Can I use different logos for desktop and mobile?
+
+Yes. Use:
+- `logos.organization.expanded` for desktop (icon + text)
+- `logos.organization.compact` for mobile (icon only)
+- `logos.organization.mini` for header-mini component (icon + text)
+
+### Are European funds mandatory?
+
+No. The `logos.eu` section is optional and only needed if your project receives European funding. Place your EU logos in `branding/logos/eu/`.
+
+### Where can I find complete examples?
+
+- `branding/branding.config.yourorganization.js` - Minimal configuration
+- `branding/branding.config.js` - Current project configuration (Gobierno de Aragón)
+
+## Uso en Proyectos Externos
+
+Puedes importar y utilizar el sistema de branding de desy-html en tus propios proyectos que dependan de `desy-html`.
+
+### Requisitos
+
+Asegúrate de tener `desy-html` instalado:
+
+```bash
+npm install desy-html
+```
+
+### Importar el plugin
+
+```javascript
+// vite.config.js
+import { brandingPlugin, loadBrandingConfig } from 'desy-html/branding/plugin';
+```
+
+### Configuración básica
+
+```javascript
+// vite.config.js
+import { brandingPlugin, loadBrandingConfig } from 'desy-html/branding/plugin';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [
+    brandingPlugin(miConfiguracionBranding),
+    // ... otros plugins
+  ]
+});
+```
+
+### Cargar configuración desde archivo
+
+Puedes cargar la configuración desde un archivo `branding/branding.config.js` en tu proyecto:
+
+```javascript
+// vite.config.js
+import { brandingPlugin, loadBrandingConfig } from 'desy-html/branding/plugin';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [
+    brandingPlugin(await loadBrandingConfig('default', process.cwd())),
+    // ... otros plugins
+  ]
+});
+```
+
+### Con variable de entorno
+
+```javascript
+// vite.config.js
+import { brandingPlugin, loadBrandingConfig } from 'desy-html/branding/plugin';
+import { defineConfig } from 'vite';
+
+const brandingConfig = await loadBrandingConfig(
+  process.env.BRANDING_CONFIG || 'default',
+  process.cwd()
+);
+
+export default defineConfig({
+  plugins: [
+    brandingPlugin(brandingConfig),
+    // ... otros plugins
+  ]
+});
+```
+
+### Estructura de configuración
+
+La configuración sigue la misma estructura que en desy-html:
+
+```javascript
+// branding/branding.config.js
+export default {
+  organization: {
+    name: 'Mi Organización',
+    website: 'https://mi-web.gob.es',
+    contact: {
+      address: 'Calle Principal, 1',
+      city: '01000 - Ciudad',
+      phone: '900 123 456',
+      phoneLink: '+34900123456',
+    },
+  },
+
+  logos: {
+    organization: {
+      compact: '/branding/logos/mi-logo-compact.svg',
+      mini: '/branding/logos/mi-logo-mini.svg',
+      expanded: '/branding/logos/mi-logo-expanded.svg',
+      alt: 'Mi Organización',
+    },
+  },
+
+  footer: {
+    license: {
+      name: 'CC BY 4.0',
+      url: 'https://creativecommons.org/licenses/by/4.0/',
+      text: 'Todo el contenido bajo licencia',
+    },
+    euFundsUrl: 'https://mi-web.gob.es/fondos-europeos',
+  },
+
+  typography: {
+    fontFamily: {
+      sans: '"Inter", ui-sans-serif, system-ui, sans-serif',
+      heading: '"Inter", ui-sans-serif, system-ui, sans-serif',
+    },
+    fontUrl: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap',
+  },
+
+  images: {
+    headerBackground: '/branding/images/header-background.svg',
+    headerBackgroundLg: '/branding/images/header-background-lg.svg',
+  },
+
+  favicon: {
+    svg: '/branding/logos/favicon.svg',
+    ico: '/branding/logos/favicon.ico',
+    appleTouch: '/branding/logos/apple-touch-icon.png',
+  },
+};
+```
+
+### Logos
+
+Los logos deben colocarse en la carpeta `branding/logos/` de tu proyecto:
+
+```
+mi-proyecto/
+├── branding/
+│   ├── logos/
+│   │   ├── mi-logo-compact.svg
+│   │   ├── mi-logo-mini.svg
+│   │   ├── mi-logo-expanded.svg
+│   │   ├── eu/
+│   │   │   ├── logo-eu.svg
+│   │   │   ├── logo-feder.svg
+│   │   │   ├── logo-fse.svg
+│   │   │   ├── logo-feader.svg
+│   │   │   └── logo-plurifondo.svg
+│   ├── images/
+│   │   ├── header-background.svg
+│   │   └── header-background-lg.svg
+│   └── branding.config.js
+└── vite.config.js
+```
+
+Los componentes de desy-html usarán automáticamente estos logos cuando estén configurados en `branding/branding.config.js`.