@lucca-front/ng 22.0.5 → 22.0.6-rc.1

package/llms/references/components/numericbadge/numericbadge.md

@@ -0,0 +1,84 @@
+# numericbadge
+
+## Import
+
+```typescript
+import { NumericBadgeComponent } from '@lucca-front/ng/numeric-badge';
+```
+
+## API Reference
+
+### NumericBadgeComponent (component)
+
+**Selectors:** `lu-numeric-badge`, `pr-numeric-badge`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `value` | `value` | `number \| string` | — | ✅ | — | Valeur affichée par le composant. Doit obligatoirement contenir une valeur numérique (ex: 7, "3/5", "999+", etc.) |
+| `size` | `size` | `'XS' \| 'S' \| 'M'` | — | — | — | Modifie la taille du composant. |
+| `palette` | `palette` | `'success' \| 'warning' \| 'error' \| 'product' \| 'neutral' \| 'none' \| 'brand'` | `'none'` | — | — | Applique une palette de couleurs au composant. |
+| `loading` | `loading` | `boolean` | `false` | — | `booleanAttribute` | [v19.1] Applique l’état de chargement. |
+| `maxValue` | `maxValue` | `number` | `999` | — | `numberAttribute` | [v19.2] Valeur maximale affichée au format "999+". |
+| `disableTooltip` | `disableTooltip` | `boolean` | `false` | — | `booleanAttribute` | Empêche le déclenchement d’une tooltip si la valeur est supérieure à maxValue. |
+
+## Related files
+
+- 📝 [Code & implementation](./numericbadge.component.md)
+
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/numericbadge/numericbadge.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-texts-numericbadge-angular-basic--docs)
+
+## Changelog
+
+> Diff structurel de l'API (selectors, inputs, outputs, models) entre versions stables, depuis `v21.4.2` jusqu'à `v22.0.0`. Les versions sans changement d'API sont omises.
+
+### 22.0.0
+
++ selector `pr-numeric-badge`
+~ `palette` : Palette → 'success' | 'warning' | 'error' | 'product' | 'neutral' | 'none' | 'brand'
+~ `maxValue` : transform ∅ → numberAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Removed
+
+- `--components-numericBadge-fontSize` and `--components-numericBadge-lineHeight` deprecated CSS custom properties have been removed.
+
+#### 20.1.1
+
+##### Fixed
+
+- `loading` state CSS specificity so the spinner is displayed reliably.
+
+#### 20.1.0
+
+##### Fixed
+
+- Empty badges no longer expose their placeholder whitespace to screen readers.
+
+#### 19.2.0
+
+##### Added
+
+- `maxValue` input to cap the displayed value, rendering `{maxValue}+` and revealing the full value in a tooltip.
+- `disableTooltip` input to prevent the full value from being shown in a tooltip.
+
+##### Fixed
+
+- Inherited text color now uses the correct palette shade.
+
+#### 19.1.0
+
+##### Added
+
+- `loading` input to display a spinner in place of the value.
+
+#### 18.1.4
+
+##### Fixed
+
+- The badge value no longer wraps onto multiple lines.

package/llms/references/components/onboarding-empty-state/onboarding-empty-state.md

@@ -0,0 +1,47 @@
+# onboarding-empty-state
+
+## Import
+
+```typescript
+import { EmptyStatePageComponent } from '@lucca-front/ng/empty-state';
+```
+
+## API Reference
+
+### EmptyStatePageComponent (component)
+
+**Selector:** `lu-empty-state-page`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `icon` | `icon` | `string \| null` | `null` | — | — | — |
+| `topRightBackground` | `topRightBackground` | `string \| null` | — | — | — | — |
+| `topRightForeground` | `topRightForeground` | `string \| null` | — | — | — | — |
+| `bottomLeftBackground` | `bottomLeftBackground` | `string \| null` | — | — | — | — |
+| `bottomLeftForeground` | `bottomLeftForeground` | `string \| null` | — | — | — | — |
+| `contentBackgroundColor` | `contentBackgroundColor` | `string` | `'var(--pr-t-elevation-surface-default)'` | — | — | — |
+| `slotTop` | `slotTop` | `PortalContent` | — | — | — | — |
+| `illustration` | `illustration` | `PortalContent` | — | — | — | — |
+| `heading` | `heading` | `string` | — | — | — | — |
+| `description` | `description` | `PortalContent` | — | — | — | — |
+| `hx` | `hx` | `number` | `1` | — | `luNumberAttribute` | — |
+| `hxStyle` | `hxStyle` | `number` | `1` | — | `luNumberAttribute` | — |
+
+## Related files
+
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/onboarding-empty-state/onboarding-empty-state.design.md)
+
+## Changelog
+
+> Diff structurel de l'API (selectors, inputs, outputs, models) entre versions stables, depuis `v21.4.2` jusqu'à `v22.0.0`. Les versions sans changement d'API sont omises.
+
+### 22.0.0
+
+~ `topRightBackground` : string → string | null, défaut 'https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-top-right-01.svg' → ∅
+~ `topRightForeground` : string → string | null, défaut 'https://cdn.lucca.fr/lucca-front/assets/empty-states/generic/coffee-01.svg' → ∅
+~ `bottomLeftBackground` : string → string | null, défaut 'https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-bottom-left-01.svg' → ∅
+~ `bottomLeftForeground` : string → string | null, défaut 'https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/core-hr-01.svg' → ∅
+~ `hx` : transform numberAttribute → luNumberAttribute
+~ `hxStyle` : transform numberAttribute → luNumberAttribute

package/llms/references/components/pageheader/pageheader.component.md

@@ -0,0 +1,389 @@
+# pageheader — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-pageheader-angular-basic--docs)
+
+## Angular
+
+Component selector : `lu-page-header`
+
+### Header basic
+
+```js
+import { JsonPipe } from '@angular/common';
+import { provideHttpClient } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { provideRouter } from '@angular/router';
+import { BreadcrumbsComponent, BreadcrumbsLinkDirective } from '@lucca-front/ng/breadcrumbs';
+import { ButtonComponent } from '@lucca-front/ng/button';
+import { provideCoreSelectCurrentUserId } from '@lucca-front/ng/core-select/user';
+import { FormFieldComponent } from '@lucca-front/ng/form-field';
+import { TextInputComponent } from '@lucca-front/ng/forms';
+import { HorizontalNavigationComponent, HorizontalNavigationLinkDirective } from '@lucca-front/ng/horizontal-navigation';
+import { IconComponent } from '@lucca-front/ng/icon';
+import { ImpersonationComponent } from '@lucca-front/ng/impersonation';
+import { LinkComponent } from '@lucca-front/ng/link';
+import { PageHeaderComponent } from '@lucca-front/ng/page-header';
+import { LuTooltipModule } from '@lucca-front/ng/tooltip';
+```
+
+```html
+<lu-page-header
+	label="H1. Page title"
+	description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac justo scelerisque, blandit nibh quis, imperdiet justo. Nullam condimentum nulla et neque ultricies bibendum."
+/>
+```
+
+## HTML/CSS
+
+Classe CSS : `.pageHeader`
+
+Les exemples ci-dessous sont affichés dans leur vue compact par défaut compte tenu de l'espace disponible :
+
+### Header back
+
+```css
+@forward '@lucca-front/scss/src/components/pageHeader';
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<header class="pageHeader">
+	<div class="pageHeader-content">
+		<div class="pageHeader-content-title">
+			<nav role="presentation" class="pageHeader-content-title-back">
+				<a href="#" class="button mod-onlyIcon mod-ghost">
+					<span class="lucca-icon icon-arrowLeft" aria-hidden="true"></span>
+					<span class="pr-u-mask">Page parente</span>
+				</a>
+			</nav>
+			<h1 class="pr-u-margin0">Page courante</h1>
+			<div>
+				<button type="button" class="button mod-onlyIcon mod-ghost" luTooltip="Modifier">
+					<span aria-hidden="true" class="lucca-icon icon-officePen"></span>
+					<span class="pr-u-mask">Modifier</span>
+				</button>
+				<button type="button" class="button mod-onlyIcon mod-ghost" luTooltip="Copier">
+					<span aria-hidden="true" class="lucca-icon icon-fileCopy"></span>
+					<span class="pr-u-mask">Copier</span>
+				</button>
+				<button type="button" class="button mod-onlyIcon mod-ghost" luTooltip="Supprimer">
+					<span aria-hidden="true" class="lucca-icon icon-trashDelete"></span>
+					<span class="pr-u-mask">Supprimer</span>
+				</button>
+			</div>
+		</div>
+		<div class="pageHeader-content-actions">
+			<label class="textfield mod-search">
+				<input class="textfield-input" type="text" placeholder="ex : Mon précieux" />
+				<span class="textfield-label pr-u-mask">Rechercher</span>
+			</label>
+			<button type="button" class="button">Button</button>
+			<button type="button" class="button mod-outline">Button</button>
+			<button type="button" class="button mod-onlyIcon mod-ghost">
+				<span aria-hidden="true" class="lucca-icon icon-menuDots"></span>
+				<span class="pr-u-mask">Voir plus</span>
+			</button>
+		</div>
+	</div>
+	<div class="pageHeader-description">
+		<p class="pr-u-marginBlockEnd0">
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac justo scelerisque, blandit nibh quis, imperdiet
+			justo. Nullam condimentum nulla et neque ultricies bibendum.
+		</p>
+	</div>
+</header>
+```
+
+### Header basic
+
+```css
+@forward '@lucca-front/scss/src/components/pageHeader';
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<header class="pageHeader">
+	<div class="pageHeader-content">
+		<div class="pageHeader-content-title">
+			<h1 class="pr-u-margin0">H1. Page title</h1>
+			<div>
+				<button type="button" class="button mod-onlyIcon mod-ghost" luTooltip="Modifier">
+					<span aria-hidden="true" class="lucca-icon icon-officePen"></span>
+					<span class="pr-u-mask">Modifier</span>
+				</button>
+				<button type="button" class="button mod-onlyIcon mod-ghost" luTooltip="Copier">
+					<span aria-hidden="true" class="lucca-icon icon-fileCopy"></span>
+					<span class="pr-u-mask">Copier</span>
+				</button>
+				<button type="button" class="button mod-onlyIcon mod-ghost" luTooltip="Supprimer">
+					<span aria-hidden="true" class="lucca-icon icon-trashDelete"></span>
+					<span class="pr-u-mask">Supprimer</span>
+				</button>
+			</div>
+		</div>
+		<div class="pageHeader-content-actions">
+			<label class="textfield mod-search">
+				<input class="textfield-input" type="text" placeholder="ex : Mon précieux" />
+				<span class="textfield-label pr-u-mask">Rechercher</span>
+			</label>
+			<button type="button" class="button">Button</button>
+			<button type="button" class="button mod-outline">Button</button>
+			<button type="button" class="button mod-onlyIcon mod-ghost">
+				<span aria-hidden="true" class="lucca-icon icon-menuDots"></span>
+				<span class="pr-u-mask">voir plus</span>
+			</button>
+		</div>
+	</div>
+	<div class="pageHeader-description">
+		<p class="pr-u-marginBlockEnd0">
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac justo scelerisque, blandit nibh quis, imperdiet
+			justo. Nullam condimentum nulla et neque ultricies bibendum
+			<a target="_blank">
+				Lien
+				<span aria-hidden="true" class="lucca-icon icon-arrowExternal mod-XS pr-u-marginInlineStart50"></span>
+			</a>
+			.
+		</p>
+	</div>
+</header>
+```
+
+### Header breadcrumb
+
+```css
+@forward '@lucca-front/scss/src/components/pageHeader';
+@forward '@lucca-front/scss/src/components/breadcrumbs';
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<header class="pageHeader mod-withBreadcrumbs">
+	<nav class="breadcrumbs" aria-describedby="breadcrumbs-title">
+		<p id="breadcrumbs-title" class="pr-u-mask">Breadcrumbs</p>
+		<ol class="breadcrumbs-list">
+			<li class="breadcrumbs-list-item"><a class="breadcrumbs-list-item-action">Page 0</a></li>
+			<li class="breadcrumbs-list-item"><a class="breadcrumbs-list-item-action">Page 1</a></li>
+			<li class="breadcrumbs-list-item">
+				<span aria-current="page" class="breadcrumbs-list-item-action">Page 2</span>
+			</li>
+		</ol>
+	</nav>
+	<div class="pageHeader-content">
+		<div class="pageHeader-content-title">
+			<h1 class="pr-u-margin0">H1. Page title</h1>
+			<div>
+				<button type="button" class="button mod-onlyIcon mod-ghost" luTooltip="Modifier">
+					<span aria-hidden="true" class="lucca-icon icon-officePen"></span>
+					<span class="pr-u-mask">Modifier</span>
+				</button>
+				<button type="button" class="button mod-onlyIcon mod-ghost" luTooltip="Copier">
+					<span aria-hidden="true" class="lucca-icon icon-fileCopy"></span>
+					<span class="pr-u-mask">Copier</span>
+				</button>
+				<button type="button" class="button mod-onlyIcon mod-ghost" luTooltip="Supprimer">
+					<span aria-hidden="true" class="lucca-icon icon-trashDelete"></span>
+					<span class="pr-u-mask">Supprimer</span>
+				</button>
+			</div>
+		</div>
+		<div class="pageHeader-content-actions">
+			<label class="textfield mod-search">
+				<input class="textfield-input" type="text" placeholder="ex : Mon précieux" />
+				<span class="textfield-label pr-u-mask">Rechercher</span>
+			</label>
+			<button type="button" class="button">Button</button>
+			<button type="button" class="button mod-outline">Button</button>
+			<button type="button" class="button mod-onlyIcon mod-ghost">
+				<span aria-hidden="true" class="lucca-icon icon-menuDots"></span>
+				<span class="pr-u-mask">voir plus</span>
+			</button>
+		</div>
+	</div>
+	<div class="pageHeader-description">
+		<p class="pr-u-marginBlockEnd0">
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac justo scelerisque, blandit nibh quis, imperdiet
+			justo. Nullam condimentum nulla et neque ultricies bibendum
+			<a target="_blank">
+				Lien
+				<span aria-hidden="true" class="lucca-icon icon-arrowExternal mod-XS pr-u-marginInlineStart50"></span>
+			</a>
+			.
+		</p>
+	</div>
+</header>
+```
+
+### Header container
+
+```css
+@forward '@lucca-front/scss/src/components/pageHeader';
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<header class="pageHeader">
+	<div class="pageHeader-containerOptional">
+		<div class="pageHeader-content">
+			<div class="pageHeader-content-title">
+				<h1 class="pr-u-margin0">H1. Page title</h1>
+				<div>
+					<button type="button" class="button mod-onlyIcon mod-ghost" luTooltip="Modifier">
+						<span aria-hidden="true" class="lucca-icon icon-officePen"></span>
+						<span class="pr-u-mask">Modifier</span>
+					</button>
+					<button type="button" class="button mod-onlyIcon mod-ghost" luTooltip="Copier">
+						<span aria-hidden="true" class="lucca-icon icon-fileCopy"></span>
+						<span class="pr-u-mask">Copier</span>
+					</button>
+					<button type="button" class="button mod-onlyIcon mod-ghost" luTooltip="Supprimer">
+						<span aria-hidden="true" class="lucca-icon icon-trashDelete"></span>
+						<span class="pr-u-mask">Supprimer</span>
+					</button>
+				</div>
+			</div>
+			<div class="pageHeader-content-actions">
+				<label class="textfield mod-search">
+					<input class="textfield-input" type="text" placeholder="ex : Mon précieux" />
+					<span class="textfield-label pr-u-mask">Rechercher</span>
+				</label>
+				<button type="button" class="button">Button</button>
+				<button type="button" class="button mod-outline">Button</button>
+				<button type="button" class="button mod-onlyIcon mod-ghost">
+					<span aria-hidden="true" class="lucca-icon icon-menuDots"></span>
+					<span class="pr-u-mask">voir plus</span>
+				</button>
+			</div>
+		</div>
+		<div class="pageHeader-description">
+			<p class="pr-u-marginBlockEnd0">
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac justo scelerisque, blandit nibh quis, imperdiet
+				justo. Nullam condimentum nulla et neque ultricies bibendum
+				<a target="_blank">
+					Lien
+					<span aria-hidden="true" class="lucca-icon icon-arrowExternal mod-XS pr-u-marginInlineStart50"></span>
+				</a>
+				.
+			</p>
+		</div>
+	</div>
+</header>
+```
+
+### Header leading trailing
+
+```css
+@forward '@lucca-front/scss/src/components/pageHeader';
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<header class="pageHeader">
+	<div class="pageHeader-content">
+		<div class="pageHeader-content-title">
+			<div class="pageHeader-content-title-leading">leading</div>
+			<h1 class="pr-u-margin0">Page courante</h1>
+			<div class="pageHeader-content-title-trailing">trailing</div>
+			<div>
+				<button type="button" class="button mod-onlyIcon mod-ghost" luTooltip="Modifier">
+					<span aria-hidden="true" class="lucca-icon icon-officePen"></span>
+					<span class="pr-u-mask">Modifier</span>
+				</button>
+				<button type="button" class="button mod-onlyIcon mod-ghost" luTooltip="Copier">
+					<span aria-hidden="true" class="lucca-icon icon-fileCopy"></span>
+					<span class="pr-u-mask">Copier</span>
+				</button>
+				<button type="button" class="button mod-onlyIcon mod-ghost" luTooltip="Supprimer">
+					<span aria-hidden="true" class="lucca-icon icon-trashDelete"></span>
+					<span class="pr-u-mask">Supprimer</span>
+				</button>
+			</div>
+		</div>
+		<div class="pageHeader-content-actions">
+			<label class="textfield mod-search">
+				<input class="textfield-input" type="text" placeholder="ex : Mon précieux" />
+				<span class="textfield-label pr-u-mask">Rechercher</span>
+			</label>
+			<button type="button" class="button">Button</button>
+			<button type="button" class="button mod-outline">Button</button>
+			<button type="button" class="button mod-onlyIcon mod-ghost">
+				<span aria-hidden="true" class="lucca-icon icon-menuDots"></span>
+				<span class="pr-u-mask">Voir plus</span>
+			</button>
+		</div>
+	</div>
+	<div class="pageHeader-description">
+		<p class="pr-u-marginBlockEnd0">
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac justo scelerisque, blandit nibh quis, imperdiet
+			justo. Nullam condimentum nulla et neque ultricies bibendum.
+		</p>
+	</div>
+</header>
+```
+
+### Header menu
+
+```css
+@forward '@lucca-front/scss/src/components/pageHeader';
+@forward '@lucca-front/scss/src/components/button';
+@forward '@lucca-front/scss/src/components/horizontalNavigation';
+```
+
+```html
+<header class="pageHeader mod-withHorizontalNavigation">
+	<div class="pageHeader-content">
+		<div class="pageHeader-content-title">
+			<h1 class="pr-u-margin0">H1. Page title</h1>
+			<div>
+				<button type="button" class="button mod-onlyIcon mod-ghost" luTooltip="Modifier">
+					<span aria-hidden="true" class="lucca-icon icon-officePen"></span>
+					<span class="pr-u-mask">Modifier</span>
+				</button>
+				<button type="button" class="button mod-onlyIcon mod-ghost" luTooltip="Copier">
+					<span aria-hidden="true" class="lucca-icon icon-fileCopy"></span>
+					<span class="pr-u-mask">Copier</span>
+				</button>
+				<button type="button" class="button mod-onlyIcon mod-ghost" luTooltip="Supprimer">
+					<span aria-hidden="true" class="lucca-icon icon-trashDelete"></span>
+					<span class="pr-u-mask">Supprimer</span>
+				</button>
+			</div>
+		</div>
+		<div class="pageHeader-content-actions">
+			<label class="textfield mod-search">
+				<input class="textfield-input" type="text" placeholder="ex : Mon précieux" />
+				<span class="textfield-label pr-u-mask">Rechercher</span>
+			</label>
+			<button type="button" class="button">Button</button>
+			<button type="button" class="button mod-outline">Button</button>
+			<button type="button" class="button mod-onlyIcon mod-ghost">
+				<span aria-hidden="true" class="lucca-icon icon-menuDots"></span>
+				<span class="pr-u-mask">voir plus</span>
+			</button>
+		</div>
+	</div>
+	<div class="pageHeader-description">
+		<p class="pr-u-marginBlockEnd0">
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac justo scelerisque, blandit nibh quis, imperdiet
+			justo. Nullam condimentum nulla et neque ultricies bibendum
+			<a target="_blank">
+				Lien
+				<span aria-hidden="true" class="lucca-icon icon-arrowExternal mod-XS pr-u-marginInlineStart50"></span>
+			</a>
+			.
+		</p>
+	</div>
+	<div class="horizontalNavigation">
+		<ul class="horizontalNavigation-list">
+			<li class="horizontalNavigation-list-item">
+				<a class="horizontalNavigation-list-item-action" href="#" aria-current="page">Page</a>
+			</li>
+			<li class="horizontalNavigation-list-item">
+				<a class="horizontalNavigation-list-item-action" href="#">Page</a>
+			</li>
+			<li class="horizontalNavigation-list-item">
+				<a class="horizontalNavigation-list-item-action" href="#">Page</a>
+			</li>
+		</ul>
+	</div>
+</header>
+```

package/llms/references/components/pageheader/pageheader.md

@@ -0,0 +1,144 @@
+# pageheader
+
+## Import
+
+```typescript
+import { PageHeaderComponent } from '@lucca-front/ng/page-header';
+```
+
+## Basic Usage
+
+```html
+<lu-page-header label="H1. Page title" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac justo scelerisque, blandit nibh quis, imperdiet justo. Nullam condimentum nulla et neque ultricies bibendum." />
+```
+
+## API Reference
+
+### PageHeaderComponent (component)
+
+**Selector:** `lu-page-header`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `description` | `description` | `PortalContent \| null` | `null` | — | — | Description du composant. [PortalContent] |
+| `label` | `label` | `PortalContent \| null` | `null` | — | — | Titre du composant. [PortalContent] |
+| `container` | `container` | `boolean` | `false` | — | `luBooleanAttribute` | [v20.1] Applique un container autour du contenu de Page Header. |
+| `sticky` | `sticky` | `boolean` | `false` | — | `luBooleanAttribute` | [v21.2] Applique un comportement sticky au Page Header quand celui ci n’est pas géré par le Main Layout |
+
+## Related files
+
+- 📝 [Code & implementation](./pageheader.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/pageheader/pageheader.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/pageheader/pageheader.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-pageheader-angular-basic--docs)
+
+## Changelog
+
+> Diff structurel de l'API (selectors, inputs, outputs, models) entre versions stables, depuis `v21.4.2` jusqu'à `v22.0.0`. Les versions sans changement d'API sont omises.
+
+### 22.0.0
+
+~ `container` : transform booleanAttribute → luBooleanAttribute
+~ `sticky` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Changed
+
+- The responsive behaviour introduced in `21.2.5` for long titles has been reverted.
+
+#### 21.2.5
+
+##### Fixed
+
+- Responsive behaviour of long titles.
+
+#### 21.2.0
+
+##### Added
+
+- `sticky` input to keep the page header visible while scrolling.
+
+#### 21.0.4
+
+##### Changed
+
+- `description` color.
+
+#### 21.0.0
+
+##### Changed
+
+- Back button redesign.
+
+#### 20.3.1
+
+##### Fixed
+
+- The component now imports the `title` SCSS component it relies on.
+
+#### 20.1.3
+
+##### Fixed
+
+- Gap between the title and the surrounding elements.
+
+#### 20.1.2
+
+##### Fixed
+
+- Conditions under which the header becomes sticky.
+
+#### 20.1.0
+
+##### Added
+
+- `container` support to align the header content with the page container.
+
+#### 19.3.3
+
+##### Added
+
+- Leading and trailing content slots.
+
+##### Fixed
+
+- Heading padding and outer margin.
+
+#### 19.3.0
+
+##### Added
+
+- `lu-page-header` component (`pageHeader`) with the `label`, `description` and `container` inputs.
+
+#### 19.1.6
+
+##### Fixed
+
+- Gap between the header actions.
+
+#### 18.2.4
+
+##### Changed
+
+- Title `max-inline-size` capped to `50rem`.
+
+#### 18.2.0
+
+##### Added
+
+- Back button.
+
+##### Changed
+
+- Component padding.
+
+#### 18.1.1
+
+##### Changed
+
+- `description` `max-inline-size` reduced from `50rem` to `33.5rem`.