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

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

@@ -0,0 +1,91 @@
+# skiplinks — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-navigation-skiplinks-basic--docs)
+
+## Angular
+
+En navigant uniquement au clavier, il est nécessaire de passer par chaque élément des différents menus avant d'arriver au contenu, ce qui peut parfois demander des dizaines d'actions. L'accès rapide permet de cibler plus rapidement chaque section générale avant d'accéder plus rapidement au contenu souhaité.
+
+Le composant reste masqué visuellement tant qu'il n'a pas le focus : il n'apparaît qu'au premier `tab`, et disparaît dès que le focus le quitte. Il n'a donc aucun impact sur le rendu de l'interface pour un utilisateur à la souris.
+
+ℹ️ Pour tester l'accès rapide, cliquez sur le coin supérieur gauche du composant ci-dessous, puis naviguez avec tab et entrée.
+
+## Mise en place
+
+Le composant se déclare une seule fois, dans `app.component.html`, **avant** le menu principal et le menu secondaire. Il doit être le premier élément focusable de la page :
+
+### Sections cibles intégrées
+
+Les trois liens intégrés s'appuient sur les identifiants suivants : 
+
+| Lien | Identifiant attendu |
+| --- | --- |
+| Menu principal | `#lucca-banner-solutions-container` |
+| Menu secondaire | `#navSide` |
+| Contenu principal | `#main-content` (à ajouter manuellement si nécessaire) |
+
+### Ajouter un accès rapide `v21.3`
+
+La directive `luSkipLinkTarget` se pose sur l'élément à atteindre : le lien correspondant est alors ajouté automatiquement au composant SkipLinks. L'identifiant utilisé pour l'ancre est généré automatiquement si aucune valeur n'est passée à la directive.
+
+L'input `luSkipLinkLabel` est obligatoire : il renseigne l'intitulé du lien affiché dans SkipLinks.
+
+### Links basic
+
+```js
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { LuSkipLinksComponent, SkipLinkDirective } from '@lucca-front/ng/a11y';
+import { AppLayoutComponent } from '@lucca-front/ng/app-layout';
+import { ContainerComponent } from '@lucca-front/ng/container';
+import { MainLayoutBlockComponent, MainLayoutComponent } from '@lucca-front/ng/main-layout';
+import { LuSkipLinksComponent } from '@lucca-front/ng/a11y';
+```
+
+```html
+<lu-skip-links />
+<lu-app-layout>
+	<ng-container appLayoutBanner>
+		<div id="lucca-banner-solutions-container" tabindex="-1">
+			<a href="#">banner</a>
+		</div>
+	</ng-container>
+	<ng-container appLayoutNavSide>
+		<div id="navSide" tabindex="-1">
+			<a href="#">navside</a>
+			<a href="#">navside</a>
+			<a href="#">navside</a>
+			<a href="#">navside</a>
+			<a href="#">navside</a>
+		</div>
+	</ng-container>
+	<lu-main-layout>
+		<lu-main-layout-block>
+			<lu-container>
+				<div class="fakeContent"><a href="#">content</a></div>
+			</lu-container>
+		</lu-main-layout-block>
+		<lu-main-layout-block>
+			<lu-container>
+				<div class="fakeContent"><a href="#">content</a></div>
+			</lu-container>
+		</lu-main-layout-block>
+		<lu-main-layout-block>
+			<lu-container>
+				<div class="fakeContent"><a href="#">content</a></div>
+			</lu-container>
+		</lu-main-layout-block>
+		<lu-main-layout-block>
+			<lu-container>
+				<div luSkipLinkTarget luSkipLinkLabel="Go to custom skip link target" class="fakeContent">
+					<a href="#">custom skip link target</a>
+				</div>
+			</lu-container>
+		</lu-main-layout-block>
+		<lu-main-layout-block>
+			<lu-container>
+				<div class="fakeContent"><a href="#">content</a></div>
+			</lu-container>
+		</lu-main-layout-block>
+	</lu-main-layout>
+</lu-app-layout>
+```

package/llms/references/components/skiplinks/skiplinks.md

@@ -0,0 +1,73 @@
+# skiplinks
+
+## Import
+
+```typescript
+import { SkipLinkDirective, LuSkipLinksComponent } from '@lucca-front/ng/a11y';
+```
+
+## Basic Usage
+
+```html
+<lu-skip-links /> <lu-app-layout> <ng-container appLayoutBanner> <div id="lucca-banner-solutions-container" tabindex="-1"> <a href="#">banner</a> </div> </ng-container> <ng-container appLayoutNavSide> <div id="navSide" tabindex="-1"> <a href="#">navside</a> <a href="#">navside</a> <a href="#">navside</a> <a href="#">navside</a> <a href="#">navside</a> </div> </ng-container> <lu-main-layout> <lu-main-layout-block> <lu-container> <div class="fakeContent"><a href="#">content</a></div> </lu-container> </lu-main-layout-block> <lu-main-layout-block> <lu-container> <div class="fakeContent"><a href="#">content</a></div> </lu-container> </lu-main-layout-block> <lu-main-layout-block> <lu-container> <div class="fakeContent"><a href="#">content</a></div> </lu-container> </lu-main-layout-block> <lu-main-layout-block> <lu-container> <div luSkipLinkTarget luSkipLinkLabel="Go to custom skip link target" class="fakeContent"><a href="#">custom skip link target</a></div> </lu-container> </lu-main-layout-block> <lu-main-layout-block> <lu-container> <div class="fakeContent"><a href="#">content</a></div> </lu-container> </lu-main-layout-block> </lu-main-layout> </lu-app-layout>
+```
+
+## API Reference
+
+### SkipLinkDirective (directive)
+
+**Selector:** `[luSkipLinkTarget]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `luSkipLinkLabel` | `luSkipLinkLabel` | `string` | — | ✅ | — | — |
+| `luSkipLinkTarget` | `luSkipLinkTarget` | `string` | `''` | — | — | — |
+
+### LuSkipLinksComponent (component)
+
+**Selector:** `lu-skip-links`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_SKIP_LINKS_TRANSLATIONS` | `LuTranslation<ILuSkipLinksLabel>` | — |
+
+### Services
+
+#### SkipLinksService
+
+- `register(link: LuSkipLink)`
+- `unregister(link: LuSkipLink)`
+
+## Related files
+
+- 📝 [Code & implementation](./skiplinks.component.md)
+
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-navigation-skiplinks-basic--docs)
+
+## Changelog
+
+_Aucun changement d'API entre v21.4.2 et v22.0.0._
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `[luSkipLinkTarget]` directive with the `luSkipLinkTarget` and `luSkipLinkLabel` inputs, to append skip links to the ones already declared on the component.
+
+#### 18.2.0
+
+##### Changed
+
+- Translations are now managed in Lokalise.

package/llms/references/components/software-icon/software-icon.component.md

@@ -0,0 +1,61 @@
+# software-icon — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-software-icon-angular-basic--docs)
+
+## Angular
+
+Component selector : `lu-software-icon`
+
+### Basic
+
+```js
+import { SOFTWARE_ICON, SOFTWARE_ICON_SIZE, SoftwareIconComponent } from '@lucca-front/ng/software-icon';
+```
+
+```html
+<lu-software-icon icon="absences" iconAlt="Absences" />
+```
+
+### Wrapper
+
+```js
+import { SoftwareIconComponent } from '@lucca-front/ng/software-icon';
+import { SoftwareIconWrapperComponent, SoftwareIconWrapperItemDirective } from '@lucca-front/ng/software-icon-wrapper';
+import { LuTooltipTriggerDirective } from '@lucca-front/ng/tooltip';
+```
+
+```html
+<lu-software-icon-wrapper max="8">
+	<lu-software-icon *luSoftwareIconWrapperItem icon="faces" iconAlt="Faces" />
+	<lu-software-icon *luSoftwareIconWrapperItem icon="ask-lucca" iconAlt="Ask Lucca" />
+	<lu-software-icon *luSoftwareIconWrapperItem icon="office" iconAlt="Office" />
+	<lu-software-icon *luSoftwareIconWrapperItem icon="sandbox" iconAlt="Sandbox" />
+	<lu-software-icon *luSoftwareIconWrapperItem icon="absences" iconAlt="Absences" />
+	<lu-software-icon *luSoftwareIconWrapperItem icon="business-expenses" iconAlt="Expenses" />
+	<lu-software-icon *luSoftwareIconWrapperItem icon="mood" iconAlt="Mood" />
+	<lu-software-icon *luSoftwareIconWrapperItem icon="invoices" iconAlt="Invoices" />
+	<lu-software-icon *luSoftwareIconWrapperItem icon="engagement" iconAlt="Engagement" />
+	<lu-software-icon *luSoftwareIconWrapperItem icon="timesheet" iconAlt="Timesheet" />
+	<lu-software-icon *luSoftwareIconWrapperItem icon="compensation" iconAlt="Compensation" />
+	<lu-software-icon *luSoftwareIconWrapperItem icon="store" iconAlt="Store" />
+</lu-software-icon-wrapper>
+```
+
+## HTML/CSS
+
+Classe CSS : `.softwareIcon`
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/softwareIcon';
+```
+
+```html
+<span
+	class="softwareIcon"
+	aria-hidden="true"
+	[innerHtml]="'https://cdn.lucca.fr/transverse/prisme/visuals/software-icon/absences.svg' | luSafeExternalSvg"
+></span>
+<span class="pr-u-mask">Absences</span>
+```

package/llms/references/components/software-icon/software-icon.md

@@ -0,0 +1,107 @@
+# software-icon
+
+## Import
+
+```typescript
+import { SoftwareIconComponent } from '@lucca-front/ng/software-icon';
+```
+
+## Basic Usage
+
+```html
+<lu-software-icon icon="absences" iconAlt="Absences" />
+```
+
+## API Reference
+
+### SoftwareIconComponent (component)
+
+**Selector:** `lu-software-icon`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `icon` | `icon` | `// Time and Activities
+	'absences' \| 'timesheet' \| 'office' \| 'projects' \| 'shifts' \| // Talent Management
+	'performance' \| 'engagement' \| 'training' \| 'recruitment' \| 'mood' \| // Employee Administration
+	'analytics' \| 'employee-administration' \| 'shared-documents' \| 'faces' \| // Spend Management
+	'business-expenses' \| 'invoices' \| 'payment-methods' \| 'accounting-assistant' \| 'certified-einvoicing-platform' \| // Compensation and Benefits
+	'compensation' \| 'payslip' \| 'benefits' \| 'payroll-assistant' \| // Lucca
+	'cloud-control' \| 'ask-lucca' \| 'ask-salesforce' \| 'calendar' \| 'administration' \| 'client-center' \| 'sandbox' \| 'store' \| 'lucca'` | — | ✅ | — | Modifie l’icône produit. |
+| `disabled` | `disabled` | `boolean` | `false` | — | `luBooleanAttribute` | Marque le produit comme inactif. |
+| `withTooltip` | `withTooltip` | `boolean` | `false` | — | `luBooleanAttribute` | Ajoute une info-bulle qui reprend l’alternative textuelle de l’icône. (Ce paramètre est automatiquement activé quand l’i… |
+| `iconAlt` | `iconAlt` | `string` | `''` | — | — | Texte alternatif de l’illustration restitué par les lecteurs d’écran. |
+| `size` | `size` | `SoftwareIconSize \| ''` | `''` | — | — | Modifie la taille du composant. |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_SOFTWARE_ICON_WRAPPER` | `boolean` | — |
+
+## Related files
+
+- 📝 [Code & implementation](./software-icon.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/software-icon/software-icon.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/software-icon/software-icon.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-software-icon-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
+
+~ `disabled` : transform booleanAttribute → luBooleanAttribute
+~ `withTooltip` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.1
+
+##### Added
+
+- `salesforce` value for the `icon` input.
+
+#### 21.3.0
+
+##### Added
+
+- `SOFTWARE_ICON` and `SOFTWARE_ICON_SIZE` constants, together with the `SoftwareIcon` and `SoftwareIconSize` types, are now publicly exported and used to type the `icon` and `size` inputs.
+
+#### 21.2.3
+
+##### Added
+
+- `iconAlt` input to provide an alternative text for the icon.
+- `withTooltip` input to reveal the icon label in a tooltip.
+- `LU_SOFTWARE_ICON_WRAPPER` injection token, set when the icon is rendered inside a `lu-software-icon-wrapper`.
+
+#### 21.2.2
+
+##### Added
+
+- New icons in the available software list.
+
+#### 21.1.4
+
+##### Added
+
+- New product icons in the available software list.
+
+#### 21.1.1
+
+##### Added
+
+- Face and mood icons.
+
+##### Fixed
+
+- Naming of some icons.
+
+#### 21.1.0
+
+##### Added
+
+- `lu-software-icon` component (`softwareIcon`) with the required `icon` input plus `size` and `disabled`.

package/llms/references/components/sortable-list/sortable-list.component.md

@@ -0,0 +1,141 @@
+# sortable-list — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-listings-sortable-list-angular-basic--docs)
+
+## Angular
+
+Le drag and drop est porté par Angular CDK [drag-drop](https://angular.dev/guide/drag-drop).
+
+Mots-clés : triable, drag and drop, réorganisation
+
+Component selector : `lu-sortable-list`
+
+### Basic
+
+```js
+import { SortableListComponent, SortableListItemComponent } from '@lucca-front/ng/sortable-list';
+```
+
+```html
+<lu-sortable-list>
+	<lu-sortable-list-item label="Label" helperMessage="Helper message" />
+	<lu-sortable-list-item label="Label" helperMessage="Helper message" />
+	<lu-sortable-list-item label="Label" helperMessage="Helper message" />
+</lu-sortable-list>
+```
+
+### Draggable
+
+```js
+import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
+import { SortableListComponent, SortableListItemComponent } from '@lucca-front/ng/sortable-list';
+```
+
+```html
+<lu-sortable-list cdkDropList (cdkDropListDropped)="drop($event)">
+	<lu-sortable-list-item label="Label" helperMessage="Helper message" drag cdkDrag />
+	<lu-sortable-list-item label="Label" helperMessage="Helper message" drag cdkDrag />
+	<lu-sortable-list-item label="Label" helperMessage="Helper message" drag cdkDrag />
+</lu-sortable-list>
+```
+
+## HTML/CSS
+
+Classe CSS : `.sortableList`
+
+### List
+
+```css
+@forward '@lucca-front/scss/src/components/sortableList';
+@forward '@lucca-front/scss/src/components/button';
+@forward '@lucca-front/scss/src/components/clear';
+```
+
+```html
+<ul class="sortableList">
+	<li class="sortableList-item">
+		<span class="sortableList-item-handler button">
+			<span class="lucca-icon icon-drag" aria-hidden="true"></span>
+			<span class="pr-u-mask">Position 1. Utilisez les touches directionnelles pour réordonner</span>
+		</span>
+		<div class="sortableList-item-content">
+			<p class="sortableList-item-content-description">Label</p>
+			<p class="sortableList-item-content-helper">Helper message</p>
+		</div>
+		<button class="clear sortableList-clear" type="button">
+			<span class="pr-u-mask">Delete</span>
+		</button>
+	</li>
+	<li class="sortableList-item">
+		<span class="sortableList-item-handler button">
+			<span class="lucca-icon icon-drag" aria-hidden="true"></span>
+			<span class="pr-u-mask">Position 1. Utilisez les touches directionnelles pour réordonner</span>
+		</span>
+		<div class="sortableList-item-content">
+			<p class="sortableList-item-content-description">Label</p>
+			<p class="sortableList-item-content-helper">Helper message</p>
+		</div>
+		<button class="clear sortableList-clear" type="button">
+			<span class="pr-u-mask">Delete</span>
+		</button>
+	</li>
+	<li class="sortableList-item">
+		<span class="sortableList-item-handler button">
+			<span class="lucca-icon icon-drag" aria-hidden="true"></span>
+			<span class="pr-u-mask">Position 1. Utilisez les touches directionnelles pour réordonner</span>
+		</span>
+		<div class="sortableList-item-content">
+			<p class="sortableList-item-content-description">Label</p>
+			<p class="sortableList-item-content-helper">Helper message</p>
+		</div>
+		<button class="clear sortableList-clear" type="button">
+			<span class="pr-u-mask">Delete</span>
+		</button>
+	</li>
+</ul>
+```
+
+### List basic
+
+```css
+@forward '@lucca-front/scss/src/components/sortableList';
+@forward '@lucca-front/scss/src/components/clear';
+```
+
+```html
+<ul class="sortableList">
+	<li class="sortableList-item">
+		<div class="sortableList-item-handler"></div>
+		<div class="sortableList-item-content">
+			<p class="sortableList-item-content-description">Label</p>
+			<p class="sortableList-item-content-helper">Helper message</p>
+		</div>
+		<button class="clear sortableList-clear" type="button">
+			<span aria-hidden="true" class="lucca-icon icon-signClose"></span>
+			<span class="pr-u-mask">Delete</span>
+		</button>
+	</li>
+	<li class="sortableList-item">
+		<div class="sortableList-item-handler"></div>
+		<div class="sortableList-item-content">
+			<p class="sortableList-item-content-description">Label</p>
+			<p class="sortableList-item-content-helper">Helper message</p>
+		</div>
+		<button class="clear sortableList-clear" type="button">
+			<span aria-hidden="true" class="lucca-icon icon-signClose"></span>
+			<span class="pr-u-mask">Delete</span>
+		</button>
+	</li>
+	<li class="sortableList-item">
+		<div class="sortableList-item-handler"></div>
+		<div class="sortableList-item-content">
+			<p class="sortableList-item-content-description">Label</p>
+			<p class="sortableList-item-content-helper">Helper message</p>
+		</div>
+		<button class="clear sortableList-clear" type="button">
+			<span aria-hidden="true" class="lucca-icon icon-signClose"></span>
+			<span class="pr-u-mask">Delete</span>
+		</button>
+	</li>
+</ul>
+```

package/llms/references/components/sortable-list/sortable-list.md

@@ -0,0 +1,84 @@
+# sortable-list
+
+## Import
+
+```typescript
+import { SortableListItemComponent, SortableListComponent } from '@lucca-front/ng/sortable-list';
+```
+
+## Basic Usage
+
+```html
+<lu-sortable-list> <lu-sortable-list-item label="Label" helperMessage="Helper message" /> <lu-sortable-list-item label="Label" helperMessage="Helper message" /> <lu-sortable-list-item label="Label" helperMessage="Helper message" />
+</lu-sortable-list>
+```
+
+## API Reference
+
+### SortableListItemComponent (component)
+
+**Selector:** `lu-sortable-list-item`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `label` | `label` | `PortalContent` | — | ✅ | — | Modifie le texte principal d’un élément de liste. [PortalContent] |
+| `helperMessage` | `helperMessage` | `string` | — | — | — | Ajoute un texte secondaire à l’élément de liste. |
+| `clickable` | `clickable` | `boolean` | `false` | — | `luBooleanAttribute` | Rend les lignes cliquables. |
+| `unclearable` | `unclearable` | `boolean` | `false` | — | `luBooleanAttribute` | Masque la croix de suppression. |
+| `drag` | `drag` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `small` | `small` | `boolean` | `false` | — | `luBooleanAttribute` | Modifie la taille du composant. |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `delete` | `delete` | `void` | — |
+
+### SortableListComponent (component)
+
+**Selector:** `lu-sortable-list`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `small` | `small` | `boolean` | `false` | — | `luBooleanAttribute` | Modifie la taille du composant. |
+
+## Related files
+
+- 📝 [Code & implementation](./sortable-list.component.md)
+
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/sortable-list/sortable-list.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-listings-sortable-list-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
+
+`SortableListItemComponent` :
+  ~ `clickable` : transform booleanAttribute → luBooleanAttribute
+  ~ `unclearable` : transform booleanAttribute → luBooleanAttribute
+  ~ `drag` : transform booleanAttribute → luBooleanAttribute
+  ~ `small` : transform booleanAttribute → luBooleanAttribute
+`SortableListComponent` :
+  ~ `small` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.1
+
+##### Changed
+
+- `label` the `lu-sortable-list-item` input now accepts a `PortalContent` instead of a plain `string`, allowing rich templated content.
+
+#### 21.0.0
+
+##### Added
+
+- `lu-sortable-list` new Angular wrapper component exposing a `small` input and projecting `lu-sortable-list-item` children.
+- `lu-sortable-list-item` new Angular wrapper component with `label` (required), `helperMessage`, `clickable`, `unclearable` and `small` inputs and a `delete` output.
+- `drag` a `lu-sortable-list-item` input that displays a drag handle and enables drag-and-drop reordering.

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

@@ -0,0 +1,56 @@
+# statusbadge — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-texts-statusbadge-angular--docs)
+
+## Angular
+
+Component selector : `lu-status-badge`
+
+### Badge angular
+
+```js
+import { STATUS_BADGE_SIZE, StatusBadgeComponent } from '@lucca-front/ng/status-badge';
+import { PALETTE } from '@lucca/prisme/core';
+```
+
+```html
+<lu-status-badge label="Status" />
+```
+
+## HTML/CSS
+
+Classe CSS : `.statusBadge`
+
+### Badge basic
+
+```css
+@forward '@lucca-front/scss/src/components/statusBadge';
+```
+
+```html
+<div class="statusBadge">Status</div>
+```
+
+### Badge palettes
+
+```css
+@forward '@lucca-front/scss/src/components/statusBadge';
+```
+
+```html
+<div class="statusBadge palette-product">Status</div>
+<div class="statusBadge palette-neutral">Status</div>
+<div class="statusBadge palette-success">Status</div>
+<div class="statusBadge palette-warning">Status</div>
+<div class="statusBadge palette-error">Status</div>
+```
+
+### Badge size
+
+```css
+@forward '@lucca-front/scss/src/components/statusBadge';
+```
+
+```html
+<div class="statusBadge mod-L">Status</div>
+```

package/llms/references/components/statusbadge/statusbadge.md

@@ -0,0 +1,63 @@
+# statusbadge
+
+## Import
+
+```typescript
+import { StatusBadgeComponent } from '@lucca-front/ng/status-badge';
+```
+
+## API Reference
+
+### StatusBadgeComponent (component)
+
+**Selector:** `lu-status-badge`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `withEllipsis` | `withEllipsis` | `boolean` | `false` | — | `luBooleanAttribute` | [v20.3] Ellipse le texte et ajoute une tooltip lorsque le label est trop long. |
+| `label` | `label` | `string` | — | ✅ | — | Modifie le texte affiché par le composant. |
+| `size` | `size` | `'L' \| 'M'` | `'M'` | — | — | Modifie la taille du composant.[v20.2] Ajout de la taille M |
+| `palette` | `palette` | `Palette \| null` | `null` | — | — | Applique une palette de couleurs au composant.[v19.2] Ajout de Neutral. |
+
+## Related files
+
+- 📝 [Code & implementation](./statusbadge.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/statusbadge/statusbadge.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/statusbadge/statusbadge.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-texts-statusbadge-angular--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
+
+~ `withEllipsis` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 20.3.0
+
+##### Added
+
+- `withEllipsis` input that truncates the label with an ellipsis and displays a tooltip when the text is too long.
+
+#### 20.2.0
+
+##### Changed
+
+- `size` input now accepts `'M'` (medium) and uses it as the default size (previously only `'L'` was available).
+
+#### 19.1.0
+
+##### Added
+
+- `lu-status-badge` Angular component (`StatusBadgeComponent`) wrapping the status badge, with `label`, `size` and `palette` inputs.
+
+#### 18.2.0
+
+##### Fixed
+
+- Vertical alignment of the badge dot inside tables and other inline-flex contexts.