+
+ {selectLabel ?? getLabel('header.select-lang')}
+
+
+ setLanguageSelectionOpen((prev) => !prev)}
+ withBorder={true}
+ >
+
+
+
+
+
+
+
+ );
+};
+
+HeaderLanguage.displayName = 'HeaderLanguage';
+
+export default HeaderLanguage;
diff --git a/src/tedi/components/layout/header/components/header-login/header-login.module.scss b/src/tedi/components/layout/header/components/header-login/header-login.module.scss
new file mode 100644
index 000000000..51c9b7c27
--- /dev/null
+++ b/src/tedi/components/layout/header/components/header-login/header-login.module.scss
@@ -0,0 +1,14 @@
+.tedi-header-login__button {
+ padding-top: 0;
+ padding-bottom: 0;
+
+ &--inner {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ &--text {
+ color: inherit;
+ }
+}
diff --git a/src/tedi/components/layout/header/components/header-login/header-login.spec.tsx b/src/tedi/components/layout/header/components/header-login/header-login.spec.tsx
new file mode 100644
index 000000000..b7bd8b040
--- /dev/null
+++ b/src/tedi/components/layout/header/components/header-login/header-login.spec.tsx
@@ -0,0 +1,98 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { isBreakpointBelow, useBreakpoint, useBreakpointProps } from '../../../../../helpers';
+import { useLabels } from '../../../../../providers/label-provider';
+import { HeaderLogin } from './header-login';
+
+import '@testing-library/jest-dom';
+
+jest.mock('../../../../../helpers', () => ({
+ ...jest.requireActual('../../../../../helpers'),
+ useBreakpoint: jest.fn(),
+ isBreakpointBelow: jest.fn(),
+ useBreakpointProps: jest.fn(),
+}));
+
+jest.mock('../../../../../providers/label-provider', () => ({
+ useLabels: jest.fn(),
+}));
+
+describe('HeaderLogin component', () => {
+ const mockGetLabel = jest.fn((key: string) => key);
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ (useBreakpoint as jest.Mock).mockReturnValue('lg');
+ (isBreakpointBelow as jest.Mock).mockReturnValue(false);
+ (useBreakpointProps as jest.Mock).mockReturnValue({
+ getCurrentBreakpointProps: jest.fn((props: Record
+ {languages.map((lang) => (
+
+ ))}
+
+
+
+ {resolvedLabel}
+
+
+
+ ) : (
+
+ )}
+
+ );
+};
+
+HeaderLogin.displayName = 'Header.Login';
+
+export default HeaderLogin;
diff --git a/src/tedi/components/layout/header/components/header-logout/header-logout.module.scss b/src/tedi/components/layout/header/components/header-logout/header-logout.module.scss
new file mode 100644
index 000000000..820ae467f
--- /dev/null
+++ b/src/tedi/components/layout/header/components/header-logout/header-logout.module.scss
@@ -0,0 +1,10 @@
+.tedi-header-logout {
+ display: flex;
+ gap: var(--link-inner-spacing-x);
+ align-items: center;
+
+ &__text {
+ min-width: max-content;
+ color: inherit;
+ }
+}
diff --git a/src/tedi/components/layout/header/components/header-logout/header-logout.spec.tsx b/src/tedi/components/layout/header/components/header-logout/header-logout.spec.tsx
new file mode 100644
index 000000000..c4e7215e6
--- /dev/null
+++ b/src/tedi/components/layout/header/components/header-logout/header-logout.spec.tsx
@@ -0,0 +1,98 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { isBreakpointBelow, useBreakpoint, useBreakpointProps } from '../../../../../helpers';
+import { useLabels } from '../../../../../providers/label-provider';
+import { HeaderLogout } from './header-logout';
+
+import '@testing-library/jest-dom';
+
+jest.mock('../../../../../helpers', () => ({
+ ...jest.requireActual('../../../../../helpers'),
+ useBreakpoint: jest.fn(),
+ isBreakpointBelow: jest.fn(),
+ useBreakpointProps: jest.fn(),
+}));
+
+jest.mock('../../../../../providers/label-provider', () => ({
+ useLabels: jest.fn(),
+}));
+
+describe('HeaderLogout component', () => {
+ const mockGetLabel = jest.fn((key: string) => key);
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ (useBreakpoint as jest.Mock).mockReturnValue('lg');
+ (isBreakpointBelow as jest.Mock).mockReturnValue(false);
+ (useBreakpointProps as jest.Mock).mockReturnValue({
+ getCurrentBreakpointProps: jest.fn((props: Record
+
+ {resolvedLabel}
+
+
+
+ ) : (
+
+ )}
+
+ );
+};
+
+HeaderLogout.displayName = 'HeaderLogout';
+
+export default HeaderLogout;
diff --git a/src/tedi/components/layout/header/components/header-mobile-button/header-mobile-button.module.scss b/src/tedi/components/layout/header/components/header-mobile-button/header-mobile-button.module.scss
new file mode 100644
index 000000000..7b51588f3
--- /dev/null
+++ b/src/tedi/components/layout/header/components/header-mobile-button/header-mobile-button.module.scss
@@ -0,0 +1,47 @@
+.tedi-header-mobile-button {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: var(--layout-header-mobile-button-size);
+ min-width: var(--layout-header-mobile-button-min-size);
+ height: var(--layout-header-mobile-button-min-size);
+ padding: var(--layout-grid-gutters-08);
+ color: var(--header-mobile-button-text-default);
+ cursor: pointer;
+ background-color: var(--header-mobile-button-background-default);
+ border: transparent;
+ border-radius: unset;
+
+ &__inner {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ &__text {
+ color: inherit;
+ }
+
+ &:not(&--disabled):hover {
+ color: var(--header-mobile-button-text-hover);
+ }
+
+ &:not(&--disabled):active {
+ color: var(--header-mobile-button-text-active);
+ }
+
+ &:not(&--disabled):focus-visible {
+ outline: none;
+ box-shadow: inset 0 0 0 1px var(--tedi-neutral-100), inset 0 0 0 3px var(--tedi-blue-500);
+ }
+
+ &--selected {
+ background: var(--header-mobile-button-background-selected);
+ }
+
+ &--disabled {
+ color: var(--header-mobile-button-text-disabled);
+ background: var(--header-mobile-button-background-disabled);
+ }
+}
diff --git a/src/tedi/components/layout/header/components/header-mobile-button/header-mobile-button.spec.tsx b/src/tedi/components/layout/header/components/header-mobile-button/header-mobile-button.spec.tsx
new file mode 100644
index 000000000..14a0e3184
--- /dev/null
+++ b/src/tedi/components/layout/header/components/header-mobile-button/header-mobile-button.spec.tsx
@@ -0,0 +1,82 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import HeaderMobileButton from './header-mobile-button';
+
+import '@testing-library/jest-dom';
+
+describe('HeaderMobileButton component', () => {
+ it('renders a button with icon and label', () => {
+ render(
+ {getIcon(icon)}
+
+ {label}
+
+
+ );
+
+ const className = cn(styles['tedi-header-mobile-button'], {
+ [styles['tedi-header-mobile-button--selected']]: selected,
+ [styles['tedi-header-mobile-button--disabled']]: disabled,
+ });
+
+ if (disabled || !href) {
+ return (
+
+ );
+ }
+
+ return (
+
+ {innerContent}
+
+ );
+});
+
+HeaderMobileButton.displayName = 'HeaderMobileButton';
+
+export default HeaderMobileButton;
diff --git a/src/tedi/components/layout/header/components/header-profile/header-profile.module.scss b/src/tedi/components/layout/header/components/header-profile/header-profile.module.scss
new file mode 100644
index 000000000..9ae37e4ec
--- /dev/null
+++ b/src/tedi/components/layout/header/components/header-profile/header-profile.module.scss
@@ -0,0 +1,89 @@
+.tedi-header-profile {
+ &__button {
+ [class*='tedi-btn__text'] {
+ padding-right: 0;
+ }
+ }
+
+ &__button-inner {
+ display: flex;
+ gap: var(--button-md-inner-spacing);
+ align-items: center;
+ justify-content: center;
+ }
+
+ &__list {
+ display: flex;
+ flex-direction: column;
+ gap: var(--layout-grid-gutters-08);
+ align-items: flex-start;
+
+ [data-name='separator'] {
+ align-self: stretch;
+ width: 100%;
+ }
+
+ [class*='tedi-header-logout'] [class*='tedi-icon'] {
+ font-size: var(--icon-02);
+ }
+ }
+
+ &__modal {
+ position: fixed;
+ top: var(--layout-header-height);
+ right: 0;
+ z-index: var(--z-index-header);
+ display: flex;
+ flex-direction: column;
+ width: var(--navigation-vertical-item-width-default);
+ max-width: 100%;
+ height: calc(100dvh - var(--layout-header-height));
+ overflow-y: auto;
+ background: var(--general-surface-primary);
+ border-top: 1px solid var(--general-border-primary);
+
+ &--content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ border-radius: 0;
+
+ [class*='tedi-header-role__selection-body'] {
+ padding: 0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default);
+ }
+
+ &-styled > * {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ width: 100%;
+ padding: var(--layout-header-modal-item-padding);
+ background: var(--header-modal-item-default-background);
+ border-bottom: 1px solid var(--general-border-primary);
+ border-radius: unset;
+ }
+ }
+
+ [class*='tedi-header-logout'] [class*='tedi-icon'] {
+ font-size: var(--icon-02);
+ }
+ }
+
+ &__overlay {
+ position: fixed;
+ top: var(--layout-header-height);
+ left: 0;
+ z-index: calc(var(--z-index-header) - 1);
+ width: 100%;
+ height: calc(100dvh - var(--layout-header-height));
+ background: var(--general-surface-overlay);
+ }
+
+ &__icon {
+ transition: transform 0.2s ease-in-out;
+
+ &--open {
+ transform: rotate(-180deg);
+ }
+ }
+}
diff --git a/src/tedi/components/layout/header/components/header-profile/header-profile.spec.tsx b/src/tedi/components/layout/header/components/header-profile/header-profile.spec.tsx
new file mode 100644
index 000000000..192b571db
--- /dev/null
+++ b/src/tedi/components/layout/header/components/header-profile/header-profile.spec.tsx
@@ -0,0 +1,252 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { isBreakpointBelow, useBreakpoint, useBreakpointProps } from '../../../../../helpers';
+import { useLabels } from '../../../../../providers/label-provider';
+import { HeaderProfile } from './header-profile';
+
+import '@testing-library/jest-dom';
+
+jest.mock('../../../../../helpers', () => ({
+ ...jest.requireActual('../../../../../helpers'),
+ useBreakpoint: jest.fn(),
+ isBreakpointBelow: jest.fn(),
+ useBreakpointProps: jest.fn(),
+}));
+
+jest.mock('../../../../../providers/label-provider', () => ({
+ useLabels: jest.fn(),
+}));
+
+describe('HeaderProfile component', () => {
+ const mockGetLabel = jest.fn((key: string) => key);
+
+ const setDesktopView = () => {
+ (useBreakpoint as jest.Mock).mockReturnValue('lg');
+ (isBreakpointBelow as jest.Mock).mockImplementation((_bp: string, target: string) => {
+ if (target === 'md') return false;
+ if (target === 'lg') return false;
+ return false;
+ });
+ };
+
+ const setMobileView = () => {
+ (useBreakpoint as jest.Mock).mockReturnValue('sm');
+ (isBreakpointBelow as jest.Mock).mockImplementation((_bp: string, target: string) => {
+ if (target === 'md') return true;
+ if (target === 'lg') return true;
+ return true;
+ });
+ };
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ setDesktopView();
+ (useBreakpointProps as jest.Mock).mockReturnValue({
+ getCurrentBreakpointProps: jest.fn((props: Record{children}
+ {
+ setModalOpen(false);
+ triggerRef.current?.focus();
+ }}
+ aria-hidden="true"
+ />
+ Acting as} />);
+
+ expect(screen.getByText('Acting as')).toBeInTheDocument();
+ });
+
+ it('shows description when showDescription is true', () => {
+ const { container } = render((representatives?.[0]);
+ const [isRoleSelectionOpen, setIsRoleSelectionOpen] = useState(false);
+ const [inputValue, setInputValue] = useState('');
+
+ useEffect(() => {
+ if (!representatives?.length) {
+ setRepresentative(undefined);
+ return;
+ }
+
+ const currentStillExists = representative && representatives.some((r) => r.id === representative.id);
+
+ if (!currentStillExists) {
+ setRepresentative(representatives[0]);
+ }
+ }, [representatives]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ const breakpoint = useBreakpoint();
+ const isTabletView = isBreakpointBelow(breakpoint, 'lg');
+ const hasMultipleRepresentatives = (representatives?.length ?? 0) > 1;
+
+ const filteredRepresentatives = useMemo(() => {
+ if (!representatives) return [];
+ if (!inputValue) return representatives;
+
+ const search = inputValue.toLowerCase();
+ return representatives.filter((r) => {
+ return r.name.toLowerCase().includes(search) || r.description?.toLowerCase().includes(search);
+ });
+ }, [representatives, inputValue]);
+
+ const handleToggle = () => {
+ const next = !isRoleSelectionOpen;
+ setIsRoleSelectionOpen(next);
+ onRoleSelectionToggle?.(next);
+ };
+
+ const handleRepresentativeChange = (rep: Representative) => {
+ setRepresentative(rep);
+ onRepresentativeChange?.(rep);
+ };
+
+ const toggleId = `${roleId}-toggle`;
+ const panelId = `${roleId}-panel`;
+
+ const representativesProps = {
+ id: panelId,
+ toggleId,
+ representatives: filteredRepresentatives,
+ representative,
+ inputValue,
+ setInputValue,
+ setRepresentative: handleRepresentativeChange,
+ setIsRoleSelectionOpen,
+ onRoleSelectionToggle: handleToggle,
+ isRoleSelectionOpen,
+ isOrganization,
+ searchLabel,
+ organizationSearchLabel,
+ searchId,
+ };
+
+ if (isTabletView) {
+ const openLabel = accordionLabels?.open ?? getLabel('header.role-selection');
+ const closeLabel = accordionLabels?.close ?? getLabel('header.role-selection.close');
+
+ return (
+ ) => props),
+ });
+ (useLabels as jest.Mock).mockReturnValue({ getLabel: mockGetLabel });
+ });
+
+ it('renders children directly on desktop', () => {
+ render(
+
+
+
+ );
+
+ expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
+ });
+
+ it('renders search button on mobile with modal variant', () => {
+ (isBreakpointBelow as jest.Mock).mockReturnValue(true);
+
+ render(
+
+
+
+ );
+
+ expect(screen.getByRole('button')).toBeInTheDocument();
+ });
+
+ it('opens dialog on mobile when search button is clicked', () => {
+ (isBreakpointBelow as jest.Mock).mockReturnValue(true);
+
+ render(
+
+
+
+ );
+
+ fireEvent.click(screen.getByRole('button'));
+
+ const dialog = document.querySelector('dialog');
+ expect(dialog).toHaveAttribute('open');
+ expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalled();
+ });
+
+ it('closes dialog when close button is clicked', () => {
+ (isBreakpointBelow as jest.Mock).mockReturnValue(true);
+
+ render(
+
+
+
+ );
+
+ fireEvent.click(screen.getByRole('button'));
+
+ const dialog = document.querySelector('dialog')!;
+ expect(dialog).toHaveAttribute('open');
+
+ fireEvent.click(screen.getByRole('button', { name: /close/i }));
+
+ expect(dialog).not.toHaveAttribute('open');
+ });
+
+ it('renders children directly on mobile with inline variant', () => {
+ (isBreakpointBelow as jest.Mock).mockReturnValue(true);
+
+ render(
+
+
+
+ );
+
+ expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
+ });
+
+ it('uses custom button label', () => {
+ (isBreakpointBelow as jest.Mock).mockReturnValue(true);
+
+ render(
+
+
+
+ );
+
+ expect(screen.getByText('Find')).toBeInTheDocument();
+ });
+
+ it('uses custom modal title', () => {
+ (isBreakpointBelow as jest.Mock).mockReturnValue(true);
+
+ render(
+
+
+
+ );
+
+ fireEvent.click(screen.getByRole('button'));
+
+ expect(screen.getByText('Search items')).toBeInTheDocument();
+ });
+
+ it('falls back to i18n labels', () => {
+ (isBreakpointBelow as jest.Mock).mockReturnValue(true);
+
+ render(
+
+
+
+ );
+
+ expect(mockGetLabel).toHaveBeenCalledWith('header.search');
+ });
+
+ it('does not open dialog when disabled on mobile', () => {
+ (isBreakpointBelow as jest.Mock).mockReturnValue(true);
+
+ render(
+
+
+
+ );
+
+ const button = screen.getByRole('button');
+ fireEvent.click(button);
+
+ const dialog = document.querySelector('dialog');
+ expect(dialog).not.toHaveAttribute('open');
+ expect(HTMLDialogElement.prototype.showModal).not.toHaveBeenCalled();
+ });
+
+ describe('Accessibility', () => {
+ beforeEach(() => {
+ (isBreakpointBelow as jest.Mock).mockReturnValue(true);
+ });
+
+ it('uses a native
}>
+ Content
+
+ );
+
+ expect(screen.getByText('Bottom bar')).toBeInTheDocument();
+ });
+
+ it('does not render bottom section when bottom is not provided', () => {
+ const { container } = render(
+
+
+
+ )}
+
+ )}
+
+ );
+};
+
+HeaderProfile.displayName = 'Header.Profile';
+
+export default HeaderProfile;
diff --git a/src/tedi/components/layout/header/components/header-role/header-role-representatives.tsx b/src/tedi/components/layout/header/components/header-role/header-role-representatives.tsx
new file mode 100644
index 000000000..00f698367
--- /dev/null
+++ b/src/tedi/components/layout/header/components/header-role/header-role-representatives.tsx
@@ -0,0 +1,167 @@
+import cn from 'classnames';
+import React, { useId } from 'react';
+
+import { useLabels } from '../../../../../providers/label-provider';
+import { Icon, IconProps } from '../../../../base/icon/icon';
+import { Text } from '../../../../base/typography/text/text';
+import { Button } from '../../../../buttons/button/button';
+import { Search } from '../../../../form/search/search';
+import Separator from '../../../../misc/separator/separator';
+import styles from './header-role.module.scss';
+
+export interface Representative {
+ /** Unique identifier for the representative. */
+ id: string;
+ /** Display name shown in the header and selection list. */
+ name: string;
+ /** Additional context shown below the name (e.g. role, organization, personal code). */
+ description?: string;
+ /**
+ * Icon displayed next to the representative in the selection list. Accepts either a
+ * Material Icon name as a string (`'person'`) for the common case, or a full
+ * `IconProps` object (`{ name: 'person', size: 18 }`) when explicit props are needed.
+ */
+ icon?: string | IconProps;
+}
+
+const resolveIcon = (icon: string | IconProps | undefined): IconProps | null => {
+ if (!icon) return null;
+ if (typeof icon === 'string') return { name: icon };
+ return icon;
+};
+
+interface HeaderRoleRepresentativesProps {
+ /** Unique id for the collapsible panel, used for aria-controls on the toggle. */
+ id?: string;
+ /** Id of the toggle button, used for aria-labelledby on the panel. */
+ toggleId?: string;
+ /** List of representatives to display in the selection list. */
+ representatives: Representative[];
+ /** Currently selected representative. */
+ representative?: Representative;
+ /** Current value of the search input. */
+ inputValue: string;
+ /** Callback to update the search input value. */
+ setInputValue: (value: string) => void;
+ /** Callback to update the selected representative. */
+ setRepresentative: (rep: Representative) => void;
+ /** Callback to control the open/closed state of the role selection. */
+ setIsRoleSelectionOpen: (open: boolean) => void;
+ /** Callback fired when the role selection is toggled. Handles both state update and external notification. */
+ onRoleSelectionToggle?: () => void;
+ /** Whether the role selection panel is currently open. */
+ isRoleSelectionOpen: boolean;
+ /** Whether the representatives belong to an organization context. Affects the search input label. */
+ isOrganization?: boolean;
+ /**
+ * Label for the search input when selecting a representative.
+ * Falls back to i18n labels when not provided.
+ */
+ searchLabel?: string;
+ /**
+ * Label for the search input when selecting an organization representative.
+ * Overrides both the default and `searchLabel` when `isOrganization` is true.
+ */
+ organizationSearchLabel?: string;
+ /** Optional id for the search input. Falls back to a generated unique id. */
+ searchId?: string;
+ /** Whether to keep the role selection open after selecting a representative. */
+ keepOpenOnSelect?: boolean;
+}
+
+const HeaderRoleRepresentatives = (props: HeaderRoleRepresentativesProps) => {
+ const {
+ id,
+ toggleId,
+ representatives,
+ inputValue,
+ setInputValue,
+ setRepresentative,
+ setIsRoleSelectionOpen,
+ onRoleSelectionToggle,
+ isRoleSelectionOpen,
+ representative,
+ isOrganization,
+ searchLabel,
+ organizationSearchLabel,
+ searchId,
+ keepOpenOnSelect,
+ } = props;
+ const { getLabel } = useLabels();
+
+ const resolvedSearchLabel = isOrganization
+ ? organizationSearchLabel ?? getLabel('header.role-selection.search.organizationLabel')
+ : searchLabel ?? getLabel('header.role-selection.search.label');
+
+ const handleSelect = (rep: Representative) => {
+ setRepresentative(rep);
+ setInputValue('');
+
+ if (!keepOpenOnSelect) {
+ if (isRoleSelectionOpen && onRoleSelectionToggle) {
+ onRoleSelectionToggle();
+ } else {
+ setIsRoleSelectionOpen(false);
+ }
+ }
+ };
+
+ const generatedSearchId = useId();
+
+ return (
+
+ {children}
+
+
+
+ );
+};
+
+HeaderRoleRepresentatives.displayName = 'HeaderRoleRepresentatives';
+
+export default HeaderRoleRepresentatives;
diff --git a/src/tedi/components/layout/header/components/header-role/header-role.module.scss b/src/tedi/components/layout/header/components/header-role/header-role.module.scss
new file mode 100644
index 000000000..50a18c727
--- /dev/null
+++ b/src/tedi/components/layout/header/components/header-role/header-role.module.scss
@@ -0,0 +1,172 @@
+@use '@tedi-design-system/core/bootstrap-utility/breakpoints';
+
+.tedi-header-role {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+
+ [data-name='button'] {
+ color: var(--header-dropdown-link);
+ }
+
+ &__label {
+ display: flex;
+ gap: var(--layout-grid-gutters-04);
+ }
+
+ &__value {
+ display: flex;
+ gap: var(--link-inner-spacing-x);
+ align-items: center;
+ min-width: max-content;
+ }
+
+ &__icon {
+ transition: transform 0.2s ease-in-out;
+
+ &--open {
+ transform: rotate(-180deg);
+ }
+ }
+
+ &__list {
+ display: flex;
+ flex-direction: column;
+ gap: var(--layout-grid-gutters-08);
+ width: 100%;
+ }
+
+ &__item {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ width: 100%;
+ padding: var(--card-padding-xs);
+ color: var(--general-text-secondary);
+ border-radius: var(--card-radius-rounded);
+
+ &-inner {
+ display: flex;
+ flex-direction: row;
+ gap: var(--layout-grid-gutters-08);
+ align-items: center;
+ }
+
+ &-text {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ width: 100%;
+ color: var(--general-text-secondary);
+ }
+
+ &--selected {
+ color: var(--general-text-white);
+ background-color: var(--header-popover-item-selected);
+ border: transparent;
+
+ .tedi-header-role__item-text {
+ color: var(--general-text-white);
+ }
+ }
+
+ &:not(.tedi-header-role__item--selected):hover {
+ color: var(--general-text-primary);
+ background-color: var(--header-popover-item-hover);
+
+ .tedi-header-role__item-text {
+ color: var(--general-text-primary);
+ }
+ }
+
+ &:not(.tedi-header-role__item--selected):active {
+ color: var(--general-text-white);
+ background-color: var(--header-popover-item-active);
+
+ .tedi-header-role__item-text {
+ color: var(--general-text-white);
+ }
+ }
+ }
+
+ &__container {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ padding: 0;
+ background-color: var(--general-surface-secondary);
+ border-bottom: 4px solid var(--general-border-brand);
+ }
+
+ &__content {
+ display: flex;
+ gap: var(--layout-grid-gutters-16);
+ align-items: center;
+ width: 100%;
+ padding: var(--card-padding-md-default);
+
+ &--open {
+ padding: var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs)
+ var(--card-padding-md-default);
+ }
+
+ &--has-representatives {
+ justify-content: space-between;
+ }
+ }
+
+ &__content--body {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+
+ &-inline {
+ flex-direction: row;
+
+ [data-name='separator'] {
+ height: 1rem;
+ padding: 0;
+ margin: var(--separator-spacing-y-01) var(--separator-spacing-x-01);
+ }
+ }
+ }
+
+ &__content--title {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--layout-grid-gutters-04);
+ }
+
+ &__content--toggle {
+ display: flex;
+ gap: var(--link-inner-spacing-x);
+ align-items: center;
+
+ &-icon {
+ transition: transform 0.3s ease;
+
+ &--open {
+ transform: rotate(-180deg);
+ }
+ }
+ }
+
+ &__selection {
+ display: grid;
+ grid-template-rows: 0fr;
+ width: 100%;
+ transition: grid-template-rows 0.3s ease;
+
+ &--open {
+ grid-template-rows: 1fr;
+ }
+
+ &-inner {
+ overflow: hidden;
+ }
+
+ &-body {
+ padding: 0;
+ }
+ }
+}
diff --git a/src/tedi/components/layout/header/components/header-role/header-role.spec.tsx b/src/tedi/components/layout/header/components/header-role/header-role.spec.tsx
new file mode 100644
index 000000000..2a580bb33
--- /dev/null
+++ b/src/tedi/components/layout/header/components/header-role/header-role.spec.tsx
@@ -0,0 +1,501 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { isBreakpointBelow, useBreakpoint } from '../../../../../helpers';
+import { useLabels } from '../../../../../providers/label-provider';
+import { HeaderRole } from './header-role';
+import HeaderRoleRepresentatives, { Representative } from './header-role-representatives';
+
+import '@testing-library/jest-dom';
+
+jest.mock('../../../../../helpers', () => ({
+ ...jest.requireActual('../../../../../helpers'),
+ useBreakpoint: jest.fn(),
+ isBreakpointBelow: jest.fn(),
+}));
+
+jest.mock('../../../../../providers/label-provider', () => ({
+ useLabels: jest.fn(),
+}));
+
+const mockRepresentatives: Representative[] = [
+ { id: '1', name: 'John Doe', description: 'Personal representative' },
+ { id: '2', name: 'Jane Smith', description: 'Organization representative' },
+ { id: '3', name: 'Bob Wilson', description: 'Another representative' },
+];
+
+const singleRepresentative: Representative[] = [{ id: '1', name: 'John Doe', description: 'Personal representative' }];
+
+describe('HeaderRole component', () => {
+ const mockGetLabel = jest.fn((key: string) => key);
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ (useBreakpoint as jest.Mock).mockReturnValue('lg');
+ (isBreakpointBelow as jest.Mock).mockReturnValue(false);
+ (useLabels as jest.Mock).mockReturnValue({ getLabel: mockGetLabel });
+ });
+
+ describe('Desktop view', () => {
+ it('renders the first representative name', () => {
+ render(
+
+
+
+
+ setInputValue(value)}
+ label={resolvedSearchLabel}
+ />
+ {representatives.map((rep) => {
+ const isSelected = representative?.id === rep.id;
+ const icon = resolveIcon(rep.icon);
+
+ return (
+
+
+ );
+ })}
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ {hasMultipleRepresentatives &&
+ {representative?.description}
+
+ )}
+
+
+ {hasMultipleRepresentatives && (
+
+ )}
+
+ {label}
+
+ {representative?.name}
+
+
+ {showDescription && representative?.description && (
+ <>
+ {!hasMultipleRepresentatives &&
+
+
+
+
+
+
+
+ ) : (
+
+ );
+};
+
+HeaderRole.displayName = 'Header.Role';
+
+export default HeaderRole;
diff --git a/src/tedi/components/layout/header/components/header-search/header-search.module.scss b/src/tedi/components/layout/header/components/header-search/header-search.module.scss
new file mode 100644
index 000000000..5b1892900
--- /dev/null
+++ b/src/tedi/components/layout/header/components/header-search/header-search.module.scss
@@ -0,0 +1,44 @@
+@use '@tedi-design-system/core/bootstrap-utility/breakpoints';
+
+.tedi-header-search__modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: var(--z-index-header);
+ width: 100%;
+ max-width: 100%;
+ height: 100dvh;
+ max-height: 100dvh;
+ padding: 0;
+ background: var(--modal-background);
+ border: 0;
+
+ &[open] {
+ display: flex;
+ flex-direction: column;
+ }
+
+ &::backdrop {
+ background: transparent;
+ }
+
+ &-heading {
+ display: flex;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: space-between;
+ padding: var(--modal-heading-padding-y) var(--modal-heading-padding-x);
+ border-bottom: 1px solid var(--modal-border-inner);
+ }
+
+ &-body {
+ flex: 1 1 0;
+ padding: var(--modal-body-padding);
+ overflow-y: auto;
+ }
+}
+
+.tedi-header-search__button-close {
+ padding: var(--layout-grid-gutters-08);
+ color: var(--button-close-text-default);
+}
diff --git a/src/tedi/components/layout/header/components/header-search/header-search.spec.tsx b/src/tedi/components/layout/header/components/header-search/header-search.spec.tsx
new file mode 100644
index 000000000..4cc3be87c
--- /dev/null
+++ b/src/tedi/components/layout/header/components/header-search/header-search.spec.tsx
@@ -0,0 +1,238 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+
+import { isBreakpointBelow, useBreakpoint, useBreakpointProps } from '../../../../../helpers';
+import { useLabels } from '../../../../../providers/label-provider';
+import { HeaderSearch } from './header-search';
+
+import '@testing-library/jest-dom';
+
+jest.mock('../../../../../helpers', () => ({
+ ...jest.requireActual('../../../../../helpers'),
+ useBreakpoint: jest.fn(),
+ isBreakpointBelow: jest.fn(),
+ useBreakpointProps: jest.fn(),
+}));
+
+jest.mock('../../../../../providers/label-provider', () => ({
+ useLabels: jest.fn(),
+}));
+
+beforeEach(() => {
+ HTMLDialogElement.prototype.showModal = jest.fn(function (this: HTMLDialogElement) {
+ this.setAttribute('open', '');
+ });
+ HTMLDialogElement.prototype.close = jest.fn(function (this: HTMLDialogElement) {
+ this.removeAttribute('open');
+ });
+});
+
+describe('HeaderSearch component', () => {
+ const mockGetLabel = jest.fn((key: string) => key);
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ (useBreakpoint as jest.Mock).mockReturnValue('lg');
+ (isBreakpointBelow as jest.Mock).mockReturnValue(false);
+ (useBreakpointProps as jest.Mock).mockReturnValue({
+ getCurrentBreakpointProps: jest.fn((props: Record
+ {label}
+ {showDescription && !isOrganization && representative?.description && (
+
+ {representative?.description}
+
+ )}
+
+
+ {hasMultipleRepresentatives ? (
+
+ {representative?.name}
+
+ )}
+ 
}
+ />
+ );
+
+ expect(screen.getByAltText('Dark logo')).toBeInTheDocument();
+ expect(screen.queryByAltText('Light logo')).not.toBeInTheDocument();
+ });
+
+ it('renders light logo when theme is dark but logoDark is not provided', () => {
+ (useTheme as jest.Mock).mockReturnValue({ theme: 'dark' });
+
+ render(}
+ />
+ );
+
+ expect(screen.getByAltText('Light logo')).toBeInTheDocument();
+ expect(screen.queryByAltText('Dark logo')).not.toBeInTheDocument();
+ });
+
+ it('applies custom className', () => {
+ const { container } = render(+ * Zeroheight ↗ + */ +const meta: Meta
;
+const logoDark = 
;
+
+const profileTranslations = {
+ myData: { et: 'Minu andmed', en: 'My data', ru: 'Мои данные' },
+ representatives: { et: 'Esindatavad', en: 'Representatives', ru: 'Представители' },
+ contacts: { et: 'Kontaktid', en: 'Contacts', ru: 'Контакты' },
+ darkMode: { et: 'Tume režiim', en: 'Dark mode', ru: 'Тёмная тема' },
+ notifications: { et: 'Riiklikud teated', en: 'National notifications', ru: 'Государственные уведомления' },
+ accessibility: { et: 'Ligipääsetavus', en: 'Accessibility', ru: 'Доступность' },
+ home: { et: 'Avaleht', en: 'Home', ru: 'Главная' },
+ services: { et: 'Teenused', en: 'Services', ru: 'Услуги' },
+ blog: { et: 'Blogi', en: 'Blog', ru: 'Блог' },
+ contact: { et: 'Kontakt', en: 'Contact', ru: 'Контакт' },
+} as const;
+
+const ProfileExample = () => {
+ const { theme, setTheme } = useTheme();
+ const { locale = 'en' } = useLabels();
+ const id = useId();
+
+ const t = (key: keyof typeof profileTranslations) => profileTranslations[key][locale] ?? profileTranslations[key].et;
+
+ const handleToggle = () => {
+ setTheme(theme === 'dark' ? 'default' : 'dark');
+ };
+
+ return (
+ <>
+
+ {t('myData')}
+
+
+ {t('representatives')}
+
+
+ {t('contacts')}
+
+
+
+
+
+
+
+
+ {label}
+
+
+ );
+};
+
+const NavigationLinks = () => {
+ const { locale = 'en' } = useLabels();
+ const pt = (key: keyof typeof profileTranslations) => profileTranslations[key][locale] ?? profileTranslations[key].et;
+
+ return (
+ <>
+
+ {pt('home')}
+
+
+ {pt('services')}
+
+
+ {pt('blog')}
+
+
+ {pt('contact')}
+
+
+ );
+};
+
+const NavigationSideNav = ({ isMobileOpen }: { isMobileOpen: boolean }) => {
+ const { locale = 'en' } = useLabels();
+ const pt = (key: keyof typeof profileTranslations) => profileTranslations[key][locale] ?? profileTranslations[key].et;
+
+ return (
+ {children}
+ );
+};
+
+const ResponsiveLogo = (props: HeaderLogoProps) => {
+ const query = '(min-width: 420px)';
+
+ const getMatches = () => (typeof window !== 'undefined' ? window.matchMedia(query).matches : true);
+
+ const [show, setShow] = useState(getMatches);
+
+ useEffect(() => {
+ if (typeof window === 'undefined') return;
+
+ const mql = window.matchMedia(query);
+ const handler = (e: MediaQueryListEvent) => setShow(e.matches);
+
+ mql.addEventListener('change', handler);
+ return () => mql.removeEventListener('change', handler);
+ }, [query]);
+
+ return
+ setIsOpen(!isOpen)} />}>
+
+
+
+ Link text
+
+
+ Link text
+
+
+ Link text
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+ setIsOpen(!isOpen)} />}>
+
+
+
+ Link text
+
+
+ Link text
+
+
+ Link text
+
+
+ Link text
+
+
+ Link text
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+ setIsOpen(!isOpen)} />}>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ {toggle}
+
+
+ {bottom && {children}
+ {bottom}
}
+ {content}
;
+};
+
+HeaderLogo.displayName = 'Header.Logo';
+
+export interface HeaderCenterProps {
+ /** Content rendered in the center area of the header, typically navigation links or a search bar. */
+ children: React.ReactNode;
+ /**
+ * Controls the horizontal alignment of center content.
+ * @default center
+ */
+ alignment?: 'flex-start' | 'center' | 'space-between';
+ /** Additional CSS class name applied to the center content area. */
+ className?: string;
+}
+
+export const HeaderCenter = (props: HeaderCenterProps) => {
+ const { children, className, alignment = 'center' } = props;
+
+ return (
+
+ {children}
+
+ );
+};
+
+HeaderCenter.displayName = 'Header.Center';
+
+export interface HeaderActionsProps {
+ /** Action elements rendered on the right side of the header (e.g. language selector, login, profile). */
+ children: React.ReactNode;
+ /** Additional CSS class name applied to the actions wrapper. */
+ className?: string;
+}
+
+export const HeaderActions = (props: HeaderActionsProps) => {
+ const { children, className } = props;
+ return {children}
;
+};
+
+HeaderActions.displayName = 'Header.Actions';
+
+Header.Logo = HeaderLogo;
+Header.Center = HeaderCenter;
+Header.Actions = HeaderActions;
+Header.Language = HeaderLanguage;
+Header.Login = HeaderLogin;
+Header.Logout = HeaderLogout;
+Header.Profile = HeaderProfile;
+Header.Role = HeaderRole;
+Header.Search = HeaderSearch;
+
+export default Header;
diff --git a/src/tedi/components/layout/header/index.ts b/src/tedi/components/layout/header/index.ts
new file mode 100644
index 000000000..54cc85f6b
--- /dev/null
+++ b/src/tedi/components/layout/header/index.ts
@@ -0,0 +1,7 @@
+export * from './header';
+export * from './components/header-language/header-language';
+export * from './components/header-login/header-login';
+export * from './components/header-logout/header-logout';
+export * from './components/header-profile/header-profile';
+export * from './components/header-role/header-role';
+export * from './components/header-search/header-search';
diff --git a/src/tedi/components/layout/hide-at/hide-at.spec.tsx b/src/tedi/components/layout/hide-at/hide-at.spec.tsx
new file mode 100644
index 000000000..4a437ad77
--- /dev/null
+++ b/src/tedi/components/layout/hide-at/hide-at.spec.tsx
@@ -0,0 +1,108 @@
+import { render, screen } from '@testing-library/react';
+
+import { isBreakpointBelow, useBreakpoint } from '../../../helpers';
+import { HideAt } from './hide-at';
+
+import '@testing-library/jest-dom';
+
+jest.mock('../../../helpers', () => ({
+ ...jest.requireActual('../../../helpers'),
+ useBreakpoint: jest.fn(),
+ isBreakpointBelow: jest.fn(),
+}));
+
+describe('HideAt component', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('renders children when no breakpoint matches', () => {
+ (useBreakpoint as jest.Mock).mockReturnValue('sm');
+ (isBreakpointBelow as jest.Mock).mockReturnValue(true);
+
+ render(
+
+ {children}
+
+);
+
+const Description = ({ children }: { children: React.ReactNode }) => (
+
+
+ The colored box below is wrapped in HideAt md. It is hidden at the md breakpoint and above. Resize the viewport
+ below md to see it appear.
+
+
+ This content is hidden at md and above.
+
+
+ ),
+};
+
+export const MultipleBreakpoints: Story = {
+ render: () => (
+
+
+ The colored box below is wrapped in HideAt sm lg. It is hidden at sm and above, and also at lg and above. It is
+ only visible below sm (xs).
+
+
+ This content is hidden at sm and above, and also at lg and above.
+
+
+ ),
+};
+
+const BreakpointOverviewTemplate: StoryFn = () => (
+
+
+ Each colored box is hidden at the specified breakpoint and above. Resize the viewport to see boxes appear as you
+ go below their threshold.
+
+
+ Hidden at xs and above
+
+
+ Hidden at sm and above
+
+
+ Hidden at md and above
+
+
+ Hidden at lg and above
+
+
+ Hidden at xl and above
+
+
+ Hidden at xxl and above
+
+
+);
+
+export const BreakpointOverview: Story = {
+ render: BreakpointOverviewTemplate,
+};
diff --git a/src/tedi/components/layout/hide-at/hide-at.tsx b/src/tedi/components/layout/hide-at/hide-at.tsx
new file mode 100644
index 000000000..110cc351b
--- /dev/null
+++ b/src/tedi/components/layout/hide-at/hide-at.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { Breakpoint, isBreakpointBelow, useBreakpoint } from '../../../helpers';
+
+type HideAtProps = {
+ children: React.ReactNode;
+} & Partial
+ {children}
+
+);
+
+const Description = ({ children }: { children: React.ReactNode }) => (
+
+
+ The colored box below is wrapped in ShowAt md. It is only visible at the md breakpoint and above. Resize the
+ viewport below md to see it disappear.
+
+
+ This content is only visible at md and above.
+
+
+ ),
+};
+
+export const MultipleBreakpoints: Story = {
+ render: () => (
+
+
+ The colored box below is wrapped in ShowAt sm lg. It is visible at sm and above, or at lg and above. It is
+ hidden below sm (xs).
+
+
+ This content is visible at sm and above, or at lg and above.
+
+
+ ),
+};
+
+const BreakpointOverviewTemplate: StoryFn = () => (
+
+
+ Each colored box is visible at the specified breakpoint and above. Resize the viewport to see boxes disappear as
+ you go below their threshold.
+
+
+ Visible at xs and above
+
+
+ Visible at sm and above
+
+
+ Visible at md and above
+
+
+ Visible at lg and above
+
+
+ Visible at xl and above
+
+
+ Visible at xxl and above
+
+
+);
+
+export const BreakpointOverview: Story = {
+ render: BreakpointOverviewTemplate,
+};
diff --git a/src/tedi/components/layout/show-at/show-at.tsx b/src/tedi/components/layout/show-at/show-at.tsx
new file mode 100644
index 000000000..097cc2c9a
--- /dev/null
+++ b/src/tedi/components/layout/show-at/show-at.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { Breakpoint, isBreakpointBelow, useBreakpoint } from '../../../helpers';
+
+type ShowAtProps = {
+ children: React.ReactNode;
+} & Partial