remove name prop and use nanoid

packages/components/package.json

@@ -40,10 +40,11 @@
   "dependencies": {
     "@floating-ui/dom": "1.6.8",
     "@oddbird/popover-polyfill": "0.3.7",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
     "@swisspost/design-system-icons": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
     "ally.js": "1.4.1",
-    "long-press-event": "2.5.0"
+    "long-press-event": "2.5.0",
+    "nanoid": "5.0.9"
   },
   "devDependencies": {
     "@percy/cli": "1.29.1",

packages/components/src/components/post-language-switch/post-language-switch.tsx

@@ -2,6 +2,7 @@ import { Component, Element, Host, h, Prop, Watch, State } from '@stencil/core';
 import { checkEmptyOrOneOf, checkType } from '@/utils';
 import { version } from '@root/package.json';
 import { SWITCH_VARIANTS, SwitchVariant } from './switch-variants';
+import { nanoid } from 'nanoid';
 
 @Component({
   tag: 'post-language-switch',
@@ -25,20 +26,6 @@ export class PostLanguageSwitch {
     );
   }
 
-  /**
-   * The name of the language switch, which will be used on the dropdown as an ID
-   */
-  @Prop() name: string;
-
-  @Watch('name')
-  validateName(value = this.name) {
-    checkType(
-      value,
-      'string',
-      'The "name" property of the post-language-switch component must be a string.',
-    );
-  }
-
   /**
    * A descriptive text for the list of language options
    */
@@ -74,12 +61,7 @@ export class PostLanguageSwitch {
    */
   @State() activeLang: string;
 
-  private menuId: string;
-
   connectedCallback() {
-    // Transforms name into an ID for the post-menu
-    this.menuId = this.name.replace(/\W/g, '_');
-
     this.updateChildrenVariant();
 
     // Get the active language based on children's active state
@@ -103,7 +85,6 @@ export class PostLanguageSwitch {
     this.validateCaption();
     this.validateDescription();
     this.validateVariant();
-    this.validateName();
 
     // Detects a change in the active language
     this.host.addEventListener('postChange', (el: CustomEvent<string>) => {
@@ -126,6 +107,8 @@ export class PostLanguageSwitch {
     });
   }
 
+  private menuId = `p${nanoid(11)}`;
+
   private renderList() {
     return (
       <Host

packages/documentation/src/stories/components/header/language-switch/language-switch.stories.ts

@@ -18,7 +18,6 @@ const meta: MetaComponent<HTMLPostLanguageSwitchElement> = {
     variant: 'list',
     caption: 'Caption',
     description: 'Description',
-    name: 'language-switch-example',
   },
   argTypes: {
     variant: {
@@ -55,7 +54,6 @@ function renderLanguageSwitch(args: Partial<HTMLPostLanguageSwitchElement>) {
     caption=${args.caption}
     description=${args.description}
     variant=${args.variant}
-    name=${args.name}
   >
     <post-language-option active="true" code="de" name="Deutsch">DE</post-language-option>
     <post-language-option active="false" code="en" name="English">EN</post-language-option>
@@ -68,7 +66,6 @@ function renderLanguageSwitchAsLinks(args: Partial<HTMLPostLanguageSwitchElement
     caption=${args.caption}
     description=${args.description}
     variant="dropdown"
-    name=${args.name}
   >
     <post-language-option url="/de" active="true" code="de" name="Deutsch">DE</post-language-option>
     <post-language-option url="/en" active="false" code="en" name="English"