[component]: KLP Login Widget

[gfellerph]

Rewrite the KLP Login Widget as a web component.

Requirements

• API for:
  • Getters for logged in state, level of privilege, user type
  • Notifications (documents)
  • Events for login, logout, notification received, keep alive, dropdown toggled
• Possibility to change login, logout and notifications endpoint
• Possibility to add dropdown links

Proposed structure

<post-klp>
  <!-- Logged out -->
  <post-klp-login login-url="/login">Login</post-klp-login>

  <!-- Logged in -->
  <post-klp-profile>
    <post-menu-trigger for="login-widget">
      <button>
        <post-avatar email="johan@email.com" firstname="Johan" lastname="Johansson"
          >Open User navigation</post-avatar
        >
        <post-badge>10 <span class="visually-hidden">new messages available</span></post-badge>
      </button>
    </post-menu-trigger>
    <post-menu id="login-widget">
      <post-avatar email="johan@email.com" firstname="Johan" lastname="Johansson"></post-avatar>
      <hr />
      <post-menu-item href="">
        <post-icon name="profil"></post-icon>
        Profil
      </post-menu-item>
      <post-menu-item href="">
        <post-icon name="mail"></post-icon>
        Nachrichten
        <post-badge>10 <span class="visually-hidden">new messages</span></post-badge>
      </post-menu-item>
      <post-menu-item href="">
        <post-icon name="settings"></post-icon>
        Einstellungen
      </post-menu-item>
      <post-menu-item href="">
        <post-icon name="switch-accounts"></post-icon>
        Konto wechseln
      </post-menu-item>
      <post-menu-item href="">
        <post-icon name="logout"></post-icon>
        Logout
      </post-menu-item>
    </post-menu>
  </post-klp-profile>
</post-klp>

• post-klp: Wrapper, discuss naming, sends auth request, hosts API, offers slots for logged in and logged out content, global props as settings
• post-klp-login: Named link (for automatic slot placement and icon)
• post-klp-profile: Named wrapper for automatic slot placement
• post-menu: Menu wrapper, has role=menu (https://github.com/swisspost/design-system/discussions/1888)
• post-menu-item: Item, has role=menuitem

### Tasks
- [ ] https://github.com/swisspost/design-system/issues/1242

[gfellerph]

Props:

• firstname
• lastname
• email

Slots:

• Menu items

Texts:

• Close button
• Trigger button
• Menu title