diff --git a/.yarn/sdks/eslint/bin/eslint.js b/.yarn/sdks/eslint/bin/eslint.js
index 9ef98e400b..42eab99331 100755
--- a/.yarn/sdks/eslint/bin/eslint.js
+++ b/.yarn/sdks/eslint/bin/eslint.js
@@ -1,18 +1,25 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
 const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
 const absRequire = createRequire(absPnpApiPath);
 
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
     // Setup the environment to be able to require eslint/bin/eslint.js
     require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
   }
 }
 
diff --git a/.yarn/sdks/eslint/lib/api.js b/.yarn/sdks/eslint/lib/api.js
index 653b22bae0..ea2b46a70b 100644
--- a/.yarn/sdks/eslint/lib/api.js
+++ b/.yarn/sdks/eslint/lib/api.js
@@ -1,18 +1,25 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
 const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
 const absRequire = createRequire(absPnpApiPath);
 
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
     // Setup the environment to be able to require eslint
     require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
   }
 }
 
diff --git a/.yarn/sdks/eslint/lib/unsupported-api.js b/.yarn/sdks/eslint/lib/unsupported-api.js
index 30fdf158b4..f5f8e24d0e 100644
--- a/.yarn/sdks/eslint/lib/unsupported-api.js
+++ b/.yarn/sdks/eslint/lib/unsupported-api.js
@@ -1,18 +1,25 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
 const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
 const absRequire = createRequire(absPnpApiPath);
 
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
     // Setup the environment to be able to require eslint/use-at-your-own-risk
     require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
   }
 }
 
diff --git a/.yarn/sdks/typescript/bin/tsc b/.yarn/sdks/typescript/bin/tsc
index 454b950b7e..a6bb0e2c16 100755
--- a/.yarn/sdks/typescript/bin/tsc
+++ b/.yarn/sdks/typescript/bin/tsc
@@ -1,18 +1,25 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
 const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
 const absRequire = createRequire(absPnpApiPath);
 
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
     // Setup the environment to be able to require typescript/bin/tsc
     require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
   }
 }
 
diff --git a/.yarn/sdks/typescript/bin/tsserver b/.yarn/sdks/typescript/bin/tsserver
index d7a605684d..957bed2001 100755
--- a/.yarn/sdks/typescript/bin/tsserver
+++ b/.yarn/sdks/typescript/bin/tsserver
@@ -1,18 +1,25 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
 const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
 const absRequire = createRequire(absPnpApiPath);
 
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
     // Setup the environment to be able to require typescript/bin/tsserver
     require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
   }
 }
 
diff --git a/.yarn/sdks/typescript/lib/tsc.js b/.yarn/sdks/typescript/lib/tsc.js
index 2f62fc96c0..a262a77d0f 100644
--- a/.yarn/sdks/typescript/lib/tsc.js
+++ b/.yarn/sdks/typescript/lib/tsc.js
@@ -1,18 +1,25 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
 const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
 const absRequire = createRequire(absPnpApiPath);
 
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
     // Setup the environment to be able to require typescript/lib/tsc.js
     require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
   }
 }
 
diff --git a/.yarn/sdks/typescript/lib/tsserver.js b/.yarn/sdks/typescript/lib/tsserver.js
index ed800750cc..1dae54c1ab 100644
--- a/.yarn/sdks/typescript/lib/tsserver.js
+++ b/.yarn/sdks/typescript/lib/tsserver.js
@@ -1,18 +1,25 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
 const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
 const absRequire = createRequire(absPnpApiPath);
 
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
     // Setup the environment to be able to require typescript/lib/tsserver.js
     require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
   }
 }
 
diff --git a/.yarn/sdks/typescript/lib/tsserverlibrary.js b/.yarn/sdks/typescript/lib/tsserverlibrary.js
index 4d99766952..7f9d7f964f 100644
--- a/.yarn/sdks/typescript/lib/tsserverlibrary.js
+++ b/.yarn/sdks/typescript/lib/tsserverlibrary.js
@@ -1,18 +1,25 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
 const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
 const absRequire = createRequire(absPnpApiPath);
 
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
     // Setup the environment to be able to require typescript/lib/tsserverlibrary.js
     require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
   }
 }
 
diff --git a/.yarn/sdks/typescript/lib/typescript.js b/.yarn/sdks/typescript/lib/typescript.js
index b5f4db25be..317b60b4c0 100644
--- a/.yarn/sdks/typescript/lib/typescript.js
+++ b/.yarn/sdks/typescript/lib/typescript.js
@@ -1,18 +1,25 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
 const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
 const absRequire = createRequire(absPnpApiPath);
 
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
     // Setup the environment to be able to require typescript
     require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
   }
 }
 
diff --git a/apps/chrome-devtools/package.json b/apps/chrome-devtools/package.json
index b8cbd5b995..64cd6b3bab 100644
--- a/apps/chrome-devtools/package.json
+++ b/apps/chrome-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@o3r/chrome-devtools",
-  "version": "0.0.0-placeholder",
+  "version": "0.0.0",
   "publishConfig": {
     "access": "public"
   },
diff --git a/apps/chrome-devtools/schemas/state.schema.json b/apps/chrome-devtools/schemas/state.schema.json
index 5faed105fa..9af49b2d7a 100644
--- a/apps/chrome-devtools/schemas/state.schema.json
+++ b/apps/chrome-devtools/schemas/state.schema.json
@@ -10,22 +10,27 @@
   ],
   "properties": {
     "color": {
+      "description": "Background color to identify the state in the selection widget.",
       "type": "string"
     },
     "colorContrast": {
+      "description": "Text color for the state in the selection widget in contrast with the background color.",
       "type": "string"
     },
     "name": {
+      "description": "User friendly name to identify the state in the Chrome Extension state panel.",
       "type": "string"
     },
     "configurations": {
       "type": "object",
+      "description": "List of the configuration-override to apply on the application.",
       "additionalProperties": {
       	"type": "object"
       }
     },
     "localizations": {
       "type": "object",
+      "description": "List of the localization-override to apply on the application.",
       "additionalProperties": {
         "type": "object",
         "additionalProperties": {
@@ -34,6 +39,7 @@
       }
     },
     "stylingVariables": {
+      "description": "List of the css-variable-override to apply on the application.",
       "type": "object",
       "additionalProperties": {
         "type": "string"
diff --git a/apps/chrome-devtools/src/app-devtools/app.component.html b/apps/chrome-devtools/src/app-devtools/app.component.html
index 461e3e9ec5..7b1e51916c 100644
--- a/apps/chrome-devtools/src/app-devtools/app.component.html
+++ b/apps/chrome-devtools/src/app-devtools/app.component.html
@@ -44,7 +44,7 @@
         </ng-template>
       </li>
     </ul>
-    <form [formGroup]="form"  class="px-4 pt-{{hasLocalChanges() ? '2' : '3'}} ng-pristine ng-valid ng-touched border-bottom ms-auto">
+    <form [formGroup]="form"  class="px-4 {{hasLocalChanges() ? 'pt-2' : 'pt-3'}} ng-pristine ng-valid ng-touched border-bottom ms-auto">
       <div>
         <ng-select
           [ngbTooltip]="
diff --git a/apps/chrome-devtools/src/app-devtools/app.component.ts b/apps/chrome-devtools/src/app-devtools/app.component.ts
index 39a1ff4db2..f60b2c97d9 100644
--- a/apps/chrome-devtools/src/app-devtools/app.component.ts
+++ b/apps/chrome-devtools/src/app-devtools/app.component.ts
@@ -22,7 +22,7 @@ import { ThemingPanelPresComponent } from './theming-panel/theming-panel-pres.co
   selector: 'app-root',
   templateUrl: './app.component.html',
   styles: `
-    ::ng-deep ng-select.local-change .ng-select-container {
+    :host ::ng-deep ng-select.local-change .ng-select-container {
       border-color: var(--bs-recommend-warning-color);
       border-width: medium;
       box-sizing: content-box;
diff --git a/apps/chrome-devtools/src/app-devtools/localization-panel/localization-panel-pres.component.ts b/apps/chrome-devtools/src/app-devtools/localization-panel/localization-panel-pres.component.ts
index 49a8aaba40..1179d7a6d1 100644
--- a/apps/chrome-devtools/src/app-devtools/localization-panel/localization-panel-pres.component.ts
+++ b/apps/chrome-devtools/src/app-devtools/localization-panel/localization-panel-pres.component.ts
@@ -47,6 +47,8 @@ export class LocalizationPanelPresComponent implements OnDestroy {
   private readonly connectionService = inject(ChromeExtensionConnectionService);
   private readonly localizationService = inject(LocalizationService);
   private readonly stateService = inject(StateService);
+  private readonly subscription = new Subscription();
+  private readonly maxItemDisplayed = 20;
 
   public readonly isTranslationDeactivationEnabled = this.localizationService.isTranslationDeactivationEnabled;
   public readonly localizations: Signal<LocalizationMetadata>;
@@ -71,6 +73,7 @@ export class LocalizationPanelPresComponent implements OnDestroy {
     return this.stateService.localState()?.localizations?.[lang] || {};
   });
   public readonly activeStateName = computed(() => this.stateService.activeState()?.name);
+
   public form = new FormGroup({
     search: new FormControl(''),
     lang: new FormControl(''),
@@ -78,8 +81,6 @@ export class LocalizationPanelPresComponent implements OnDestroy {
     translations: new FormGroup<Record<string, LangTranslationsControl>>({})
   });
 
-  private readonly subscription = new Subscription();
-
   public accordion = viewChild<NgbAccordionDirective>('acc');
 
   constructor() {
@@ -114,7 +115,7 @@ export class LocalizationPanelPresComponent implements OnDestroy {
     });
 
     this.filteredLocalizations = computed(() => {
-      return searchMatch().slice(0, 20);
+      return searchMatch().slice(0, this.maxItemDisplayed);
     });
 
     this.isTruncated = computed(() => this.filteredLocalizations().length < searchMatch().length);
diff --git a/apps/chrome-devtools/src/app-devtools/state-panel/state-panel.component.ts b/apps/chrome-devtools/src/app-devtools/state-panel/state-panel.component.ts
index ae6ed33d05..f1648a3bb4 100644
--- a/apps/chrome-devtools/src/app-devtools/state-panel/state-panel.component.ts
+++ b/apps/chrome-devtools/src/app-devtools/state-panel/state-panel.component.ts
@@ -154,6 +154,10 @@ export class StatePanelComponent {
     this.stateService.setActiveState(stateName);
   }
 
+  /**
+   * Update a state and save its content in the Chrome Extension store.
+   * @param stateName
+   */
   public updateState(stateName: string) {
     const control = this.form.controls.states.controls[stateName];
     const activeState = this.activeState();
@@ -162,6 +166,9 @@ export class StatePanelComponent {
     }
   }
 
+  /**
+   * Create a new state and save its content in the Chrome Extension store.
+   */
   public saveNewState() {
     if (this.form.value.newStateName) {
       this.saveState(this.form.value.newStateName, this.form.value.newStateName, this.form.value.newStateColor || 'black');
@@ -174,12 +181,23 @@ export class StatePanelComponent {
     }
   }
 
+  /**
+   * Remove a state from the Chrome Extension application and store.
+   * Note that the active store cannot be deleted.
+   *
+   * @param stateName
+   */
   public deleteState(stateName: string) {
     if (this.activeState()?.name !== stateName) {
       this.stateService.deleteState(stateName);
     }
   }
 
+  /**
+   * Download a state as a json file
+   *
+   * @param stateName
+   */
   public exportState(stateName: string) {
     const state = this.states()[stateName];
     if (!state) {
@@ -192,6 +210,11 @@ export class StatePanelComponent {
     a.click();
   }
 
+  /**
+   * Download a state file, add it to the state list and share it .
+   *
+   * @param event
+   */
   public async onFileChange(event: InputEvent) {
     try {
       const element = event.target as HTMLInputElement;
diff --git a/apps/chrome-devtools/src/extension/background.ts b/apps/chrome-devtools/src/extension/background.ts
index aa64608e2a..308872834e 100644
--- a/apps/chrome-devtools/src/extension/background.ts
+++ b/apps/chrome-devtools/src/extension/background.ts
@@ -1,6 +1,6 @@
 import type { InjectContentMessage, OtterMessage, OtterMessageContent, otterMessageType } from '@o3r/core';
 import type { ApplicationInformationContentMessage } from '@o3r/application';
-import { type scriptToInject as ScriptToInject } from '../services/connection.service';
+import type { scriptToInject as ScriptToInject } from '../services/connection.service';
 import type { ACTIVE_STATE_NAME_KEY as ActivateStateNameKey, ExtensionMessage, State, STATES_KEY as StatesKey, WHITELISTED_HOSTS_KEY as WhitelistedHostsKey } from './interface';
 
 
@@ -37,11 +37,20 @@ const isInjectionContentMessage = (content: any): content is InjectContentMessag
   return content?.dataType === 'inject';
 };
 
-
+/**
+ * determinate if the message contains application information to share in the global panel
+ *
+ * @param data
+ */
 const isApplicationInformationMessage = (data?: OtterMessageContent): data is ApplicationInformationContentMessage => data?.dataType === 'applicationInformation';
 
 const activeStateAppliedOn = new Set<number>();
 
+/**
+ * List of host which can access to the Chrome Extension store
+ *
+ * @param url
+ */
 const isWhitelistedHost = async (url?: string) => {
   if (!url) {
     return;
@@ -51,6 +60,13 @@ const isWhitelistedHost = async (url?: string) => {
   return whitelistHosts.some((host) => (new RegExp(host)).test(hostname));
 };
 
+/**
+ * Retrieve a state and send a message to the Otter application connected to the DevTool that they should apply this
+ * state.
+ *
+ * @param appName
+ * @param tabId
+ */
 const applyActivateState = async (appName: string, tabId: number) => {
   const sendMessage = async (dataType: string, content: any) => {
     await chrome.scripting.executeScript({
diff --git a/apps/chrome-devtools/src/services/localization.service.ts b/apps/chrome-devtools/src/services/localization.service.ts
index cf089ca425..a01808770b 100644
--- a/apps/chrome-devtools/src/services/localization.service.ts
+++ b/apps/chrome-devtools/src/services/localization.service.ts
@@ -13,6 +13,7 @@ import { ChromeExtensionConnectionService, filterAndMapMessage } from './connect
 @Injectable({ providedIn: 'root' })
 export class LocalizationService {
   private readonly connectionService = inject(ChromeExtensionConnectionService);
+  private readonly lang = signal<string | undefined>(undefined);
   public readonly localizationsMetadata = toSignal(
     this.connectionService.message$.pipe(
       filterAndMapMessage(
@@ -40,7 +41,6 @@ export class LocalizationService {
     ),
     { initialValue: false }
   );
-  private readonly lang = signal<string | undefined>(undefined);
   public readonly currentLanguage = this.lang.asReadonly();
 
   public readonly translationsForCurrentLanguage: Signal<Record<string, string>> = toSignal(
diff --git a/apps/github-cascading-app/package.json b/apps/github-cascading-app/package.json
index 91d10cac2e..7f2fa44612 100644
--- a/apps/github-cascading-app/package.json
+++ b/apps/github-cascading-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@o3r/github-cascading-app",
-  "version": "0.0.0-placeholder",
+  "version": "0.0.0",
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/@o3r/styling/builders/style-extractor/index.ts b/packages/@o3r/styling/builders/style-extractor/index.ts
index b602a8ed5e..30952863ca 100644
--- a/packages/@o3r/styling/builders/style-extractor/index.ts
+++ b/packages/@o3r/styling/builders/style-extractor/index.ts
@@ -92,8 +92,6 @@ export default createBuilder(createBuilderWithMetricsIfInstalled<StyleExtractorB
       cssVarList
         .forEach((item) => {
           acc.variables[item.name] = item;
-          // Why do we delete this item name?
-          // delete (acc.variables[item.name] as any).name;
         });
       return acc;
     }, previousMetadata);
diff --git a/packages/@o3r/styling/scss/theming/otter-theme/_functions.scss b/packages/@o3r/styling/scss/theming/otter-theme/_functions.scss
index ef10b6aefb..41557d37a2 100644
--- a/packages/@o3r/styling/scss/theming/otter-theme/_functions.scss
+++ b/packages/@o3r/styling/scss/theming/otter-theme/_functions.scss
@@ -17,8 +17,8 @@
 
     @each $key, $value in $meta-theme {
       $new-key: if($root-name != '', '#{$root-name}-#{$key}', $key);
-      $new-value: _meta-theme-to-otter($value, $new-key);
-      $ret: map.merge($ret, ($key: $new-value));
+      // We do not extract the metadata as (variable, value) pair
+      $new-value: if($key != details, _meta-theme-to-otter($value, $new-key), $value);      $ret: map.merge($ret, ($key: $new-value));
     }
 
     @return $ret;
diff --git a/packages/@o3r/styling/scss/theming/otter-theme/_material.scss b/packages/@o3r/styling/scss/theming/otter-theme/_material.scss
index 3b454396d9..23ad911c6a 100644
--- a/packages/@o3r/styling/scss/theming/otter-theme/_material.scss
+++ b/packages/@o3r/styling/scss/theming/otter-theme/_material.scss
@@ -141,6 +141,10 @@
     @return $meta-theme;
   }
 
+  @if (map.has-key($meta-theme, value) and map.has-key($meta-theme, details)) {
+    @return _meta-theme-to-material(map.get($meta-theme, value), $root-name, $enable-css-var);
+  }
+
   @else {
     $ret: $meta-theme;