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

package/llms/references/components/time/time.md

@@ -0,0 +1,127 @@
+# time
+
+## Import
+
+```typescript
+import { DurationPickerComponent, TimePickerComponent, TimeRangePickerComponent } from '@lucca-front/ng/time';
+```
+
+## Basic Usage
+
+```html
+<lu-form-field [label]="labelID" [rolePresentationLabel]="true" tooltip="Tooltip message" inlineMessage="Helper message" inlineMessageState="default"> <lu-time-picker label="Label" required step="PT1M" max="23:59:59" [forceMeridiemDisplay]="undefined" [(ngModel)]="example" /> <ng-template #labelID> <span aria-hidden="true">Label</span> </ng-template>
+</lu-form-field> <pr-story-model-display>{{ example }}</pr-story-model-display>
+```
+
+## API Reference
+
+### DurationPickerComponent (component)
+
+**Selector:** `lu-duration-picker`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `step` | `step` | `ISO8601Duration \| null` | `null` | — | — | — |
+| `size` | `size` | `'S' \| 'M'` | — | — | — | Modifie la taille du champ. |
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `max` | `max` | ``${string}P${string}`` | `'PT99H'` | — | — | — |
+| `displayArrows` | `displayArrows` | `boolean` | `false` | — | `luBooleanAttribute` | Affiche les boutons d’incrémentation. |
+| `label` | `label` | `string` | — | — | — | Modifie le label de l’input. |
+| `hideZeroValue` | `hideZeroValue` | `boolean` | `false` | — | `luBooleanAttribute` | Masque le contenu du champ lorsque sa valeur est nulle. |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `durationChange` | `durationChange` | `DurationChangeEvent` | — |
+
+#### Models (two-way binding)
+
+| Property | Type | Required | Notes |
+|----------|------|----------|-------|
+| `disabled` | `unknown` | — | — |
+| `value` | `ISO8601Duration` | — | — |
+
+### TimePickerComponent (component)
+
+**Selector:** `lu-time-picker`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `step` | `step` | `ISO8601Duration \| null` | `null` | — | — | — |
+| `size` | `size` | `'S' \| 'M'` | — | — | — | Modifie la taille du champ. |
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `max` | `max` | ``${string}:${string}:${string}`` | `MAX_TIME` | — | — | — |
+| `displayArrows` | `displayArrows` | `boolean` | `false` | — | `luBooleanAttribute` | Affiche les boutons d’incrémentation. |
+| `forceMeridiemDisplay` | `forceMeridiemDisplay` | `unknown` | `null` | — | `luNullableBooleanAttribute` | — |
+| `label` | `label` | `string` | — | — | — | Modifie le label de l’input. |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `timeChange` | `timeChange` | `TimeChangeEvent` | — |
+| `prevPicker` | `prevPicker` | `void` | — |
+| `nextPicker` | `nextPicker` | `void` | — |
+| `nonDigitKeyPressed` | `nonDigitKeyPressed` | `void` | — |
+| `touched` | `touched` | `void` | — |
+
+#### Models (two-way binding)
+
+| Property | Type | Required | Notes |
+|----------|------|----------|-------|
+| `disabled` | `unknown` | — | — |
+| `value` | `ISO8601Time` | — | — |
+
+### TimeRangePickerComponent (component)
+
+**Selector:** `lu-time-range-picker`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `displayArrows` | `displayArrows` | `boolean` | `false` | — | `luBooleanAttribute` | Affiche les boutons d’incrémentation. |
+| `forceMeridiemDisplay` | `forceMeridiemDisplay` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `disabled` | `disabled` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `size` | `size` | `'S' \| 'M'` | — | — | — | Modifie la taille du champ. |
+| `max` | `max` | ``${string}:${string}:${string}`` | `MAX_TIME` | — | — | — |
+| `step` | `step` | `ISO8601Duration \| null` | `null` | — | — | — |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_DURATION_PICKER_TRANSLATIONS` | `unknown` | — |
+| `LU_TIME_PICKER_TRANSLATIONS` | `unknown` | — |
+| `LU_TIME_RANGE_PICKER_TRANSLATIONS` | `unknown` | — |
+
+## Related files
+
+- 📝 [Code & implementation](./time.component.md)
+
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-time-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
+
+`DurationPickerComponent` :
+  ~ `step` : `${string}P${string}` → ISO8601Duration | null
+  ~ `displayArrows` : transform booleanAttribute → luBooleanAttribute
+  ~ `hideZeroValue` : transform booleanAttribute → luBooleanAttribute
+`TimePickerComponent` :
+  ~ `step` : `${string}P${string}` → ISO8601Duration | null
+  ~ `displayArrows` : transform booleanAttribute → luBooleanAttribute
+  ~ `forceMeridiemDisplay` : boolean | null → unknown, transform ∅ → luNullableBooleanAttribute
+`TimeRangePickerComponent` :
+  ~ `displayArrows` : transform booleanAttribute → luBooleanAttribute
+  ~ `forceMeridiemDisplay` : transform booleanAttribute → luBooleanAttribute
+  ~ `disabled` : transform booleanAttribute → luBooleanAttribute

package/llms/references/components/time-picker/time-picker.md

@@ -0,0 +1,63 @@
+# time-picker
+
+## Import
+
+```typescript
+import { TimePickerComponent } from '@lucca-front/ng/time';
+```
+
+## API Reference
+
+### TimePickerComponent (component)
+
+**Selector:** `lu-time-picker`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `step` | `step` | `ISO8601Duration \| null` | `null` | — | — | — |
+| `size` | `size` | `'S' \| 'M'` | — | — | — | — |
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `max` | `max` | ``${string}:${string}:${string}`` | `MAX_TIME` | — | — | — |
+| `displayArrows` | `displayArrows` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `forceMeridiemDisplay` | `forceMeridiemDisplay` | `unknown` | `null` | — | `luNullableBooleanAttribute` | — |
+| `label` | `label` | `string` | — | — | — | — |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `timeChange` | `timeChange` | `TimeChangeEvent` | — |
+| `prevPicker` | `prevPicker` | `void` | — |
+| `nextPicker` | `nextPicker` | `void` | — |
+| `nonDigitKeyPressed` | `nonDigitKeyPressed` | `void` | — |
+| `touched` | `touched` | `void` | — |
+
+#### Models (two-way binding)
+
+| Property | Type | Required | Notes |
+|----------|------|----------|-------|
+| `disabled` | `unknown` | — | — |
+| `value` | `ISO8601Time` | — | — |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_TIME_PICKER_TRANSLATIONS` | `unknown` | — |
+
+## Related files
+
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/time-picker/time-picker.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/time-picker/time-picker.figma.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
+
+~ `step` : `${string}P${string}` → ISO8601Duration | null
+~ `displayArrows` : transform booleanAttribute → luBooleanAttribute
+~ `forceMeridiemDisplay` : boolean | null → unknown, transform ∅ → luNullableBooleanAttribute

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

@@ -0,0 +1,159 @@
+# timelines — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-listings-timelines-basic--docs)
+
+## HTML/CSS
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/timeline';
+```
+
+```html
+<ol class="timeline">
+	<li class="timeline-step">
+		<span class="timeline-step-title">
+			<a href="#" class="timeline-step-title-action">Previous step</a>
+		</span>
+	</li>
+	<li class="timeline-step" aria-current="step">
+		<span class="timeline-step-title">Current step</span>
+	</li>
+	<li class="timeline-step">
+		<span class="timeline-step-title">Next step</span>
+	</li>
+	<li class="timeline-step">
+		<span class="timeline-step-title">Final step</span>
+	</li>
+</ol>
+```
+
+### Checked
+
+```css
+@forward '@lucca-front/scss/src/components/timeline';
+```
+
+```html
+<ol class="timeline mod-checkedPastStep mod-number">
+	<li class="timeline-step">
+		<div class="timeline-step-title">
+			<span class="timeline-step-title-icon" aria-hidden="true"></span>
+			<a href="#" class="timeline-step-title-action">Previous step</a>
+		</div>
+	</li>
+	<li class="timeline-step">
+		<div class="timeline-step-title">
+			<span class="timeline-step-title-icon" aria-hidden="true"></span>
+			<a href="#" class="timeline-step-title-action">Previous step</a>
+		</div>
+	</li>
+	<li class="timeline-step" aria-current="step">
+		<div class="timeline-step-title">
+			<span class="timeline-step-title-icon" aria-hidden="true"></span>
+			Current step
+		</div>
+	</li>
+	<li class="timeline-step">
+		<div class="timeline-step-title">
+			<span class="timeline-step-title-icon" aria-hidden="true"></span>
+			Last step
+		</div>
+	</li>
+</ol>
+```
+
+### Dashed
+
+```css
+@forward '@lucca-front/scss/src/components/timeline';
+```
+
+```html
+<ol class="timeline mod-dashed">
+	<li class="timeline-step">
+		<span class="timeline-step-title">
+			<a href="#" class="timeline-step-title-action">Previous step</a>
+		</span>
+	</li>
+	<li class="timeline-step" aria-current="step">
+		<span class="timeline-step-title">Current step</span>
+	</li>
+	<li class="timeline-step">
+		<span class="timeline-step-title">Next step</span>
+	</li>
+	<li class="timeline-step">
+		<span class="timeline-step-title">Final step</span>
+	</li>
+</ol>
+```
+
+### Progress
+
+```css
+@forward '@lucca-front/scss/src/components/timeline';
+```
+
+```html
+<ol class="timeline mod-progress">
+	<li class="timeline-step">
+		<div class="timeline-step-title">First step</div>
+	</li>
+	<li class="timeline-step" aria-current="step" [attr.style]="'--progress:' + progress + '%'">
+		<div class="timeline-step-title">Current step</div>
+	</li>
+	<li class="timeline-step">
+		<div class="timeline-step-title">Next step</div>
+	</li>
+</ol>
+```
+
+### Vertical
+
+<callout background="2" fullWidth="true">
+
+Vous pouvez modifier le niveau des titres en l’adaptant à votre plan documentaire.
+
+</callout>
+
+```css
+@forward '@lucca-front/scss/src/components/timeline';
+```
+
+```html
+<ol class="timeline mod-vertical">
+	<li class="timeline-step">
+		<div class="timeline-step-title">
+			<a href="#" class="timeline-step-title-action">Previous step</a>
+		</div>
+		<div class="timeline-step-description">
+			Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad eligendi voluptas sit facere ipsum, veniam rerum
+			aliquam ut delectus aperiam deserunt cum nulla magnam et laborum sequi natus dolorem repudiandae.
+		</div>
+	</li>
+	<li class="timeline-step" aria-current="step">
+		<div class="timeline-step-title">Current step</div>
+		<div class="timeline-step-description">
+			Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure porro atque, laboriosam at vitae expedita ab
+			recusandae voluptas obcaecati commodi deleniti enim doloremque? Consequuntur quisquam natus obcaecati recusandae
+			officia dicta. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad eligendi voluptas sit facere ipsum,
+			veniam rerum aliquam ut delectus aperiam deserunt cum nulla magnam et laborum sequi natus dolorem repudiandae.
+		</div>
+	</li>
+	<li class="timeline-step">
+		<div class="timeline-step-title">Next step</div>
+		<div class="timeline-step-description">
+			Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad eligendi voluptas sit facere ipsum, veniam rerum
+			aliquam ut delectus aperiam deserunt cum nulla magnam et laborum sequi natus dolorem repudiandae.
+		</div>
+	</li>
+	<li class="timeline-step">
+		<div class="timeline-step-title">Last step</div>
+		<div class="timeline-step-description">
+			Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad eligendi voluptas sit facere ipsum, veniam rerum
+			aliquam ut delectus aperiam deserunt cum nulla magnam et laborum sequi natus dolorem repudiandae.
+		</div>
+	</li>
+</ol>
+```

package/llms/references/components/timelines/timelines.md

@@ -0,0 +1,8 @@
+# timelines
+
+## Related files
+
+- 📝 [Code & implementation](./timelines.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/timelines/timelines.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/timelines/timelines.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-listings-timelines-basic--docs)

package/llms/references/components/title-and-text/title-and-text.component.md

@@ -0,0 +1,14 @@
+# title-and-text — Code & Implementation
+
+## HTML/CSS
+
+Mots-clés : titres, texte, heading
+
+Il est possible de conserver ces spacings temporairement via un flag suivant :
+
+### Accessibilité 
+
+* Pour faciliter le travail de construction de plans de documents de nos pages, la sémantique des titres et leurs styles graphiques peuvent être dissociés avec ces classes utilitaires : `.pr-u-h1, .pr-u-h2…`.
+* Des *mixins* `@include hx, @include h1, @include h2…` permettent également de pouvoir associer des styles graphiques différents en fonction du *responsive* ; le *mixin* `@include hx` regroupant les styles communs à tout les niveaux de titres.
+
+Pour tous les Titles, ne mettons pas de point final.

package/llms/references/components/title-and-text/title-and-text.md

@@ -0,0 +1,60 @@
+# title-and-text
+
+## Related files
+
+- 📝 [Code & implementation](./title-and-text.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/title-and-text/title-and-text.design.md)
+
+## Changelog
+
+_Aucun changement d'API entre v21.4.2 et v22.0.0._
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.1
+
+##### Fixed
+
+- `LuTitleService` no longer leaks its RxJS subscriptions, which are now torn down when the service is destroyed.
+
+#### 21.3.0
+
+##### Added
+
+- `readTitleByLiveAnnouncer` option in `provideLuTitleStrategy` to announce page title changes through the CDK `LiveAnnouncer`.
+
+#### 20.3.0
+
+##### Added
+
+- `mod-elementAfterText` modifier to display an element next to the title text using a flex layout with column spacing.
+
+#### 19.3.3
+
+##### Added
+
+- `namingStrategy` option (`'product' | 'other'`) in `provideLuTitleStrategy` to choose how the application name is appended to the title.
+
+##### Changed
+
+- Product titles now end with `Lucca <appTitle>` instead of `<appTitle> – Lucca`.
+
+#### 19.3.0
+
+##### Added
+
+- `provideLuTitleStrategy` function to set up the title strategy (app title, translate service) in a single provider call.
+
+##### Changed
+
+- `ILuTitleTranslateService.translate` can now return an `Observable<string>` in addition to a plain `string`.
+
+##### Deprecated
+
+- `APP_TITLE` injection token, use `provideLuTitleStrategy` instead.
+
+#### 19.2.0
+
+##### Changed
+
+- Titles no longer apply default vertical spacing (margin and padding) unless the deprecated spacings flag is enabled.

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

@@ -0,0 +1,54 @@
+# toasts — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-overlays-toasts--docs)
+
+## Angular
+
+Les toasts servent à afficher une information ou un callback dans un coin de l'application.
+
+### Toasts
+
+```js
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { defaultToastDuration, LuToastInput, LuToastsComponent, LuToastsService, LuToastType } from '@lucca-front/ng/toast';
+import { Observable, ReplaySubject, Subject } from 'rxjs';
+import { map } from 'rxjs/operators';
+```
+
+```html
+<section class="contentSection" style="min-block-size: 20rem">
+	<lu-toasts [sources]="[toastError$]" [bottom]="isBottom" />
+
+	<div class="pr-u-displayFlex pr-u-gap100 pr-u-marginBlockEnd200">
+		<button type="button" class="button mod-S" (click)="createToast('Info')">Toast</button>
+		<button type="button" class="button mod-S mod-outlined palette-success" (click)="createToast('Success')">
+			Toast success
+		</button>
+		<button type="button" class="button mod-S mod-outlined palette-warning" (click)="createToast('Warning')">
+			Toast warning
+		</button>
+		<button type="button" class="button mod-S mod-outlined palette-error" (click)="notifyError()">Toast error</button>
+	</div>
+
+	<div class="pr-u-displayFlex pr-u-gap100 pr-u-marginBlockEnd200">
+		<button type="button" class="button mod-S mod-outlined" (click)="createToast('Info', null)">
+			Toast sans auto kill
+		</button>
+		<button type="button" class="button mod-S mod-outlined" (click)="createToast('Info', 2000)">Toast 2000ms</button>
+		<button type="button" class="button mod-S mod-outlined" (click)="createToastWithTemplate('Info', toastMessage)">
+			Toast avec template
+		</button>
+	</div>
+
+	<ng-template #toastMessage>
+		<button type="button" class="button mod-outlined" (click)="onClickButtonInsideToast()">Toast avec button</button>
+	</ng-template>
+
+	<label class="switch">
+		<input class="switch-input" type="checkbox" name="switchList1" [(ngModel)]="isBottom" #ctrl="ngModel" />
+		<span class="switch-label">Positionnement bas</span>
+	</label>
+</section>
+```

package/llms/references/components/toasts/toasts.md

@@ -0,0 +1,112 @@
+# toasts
+
+## Import
+
+```typescript
+import { LuToastsComponent } from '@lucca-front/ng/toast';
+```
+
+## API Reference
+
+### LuToastsComponent (component)
+
+**Selector:** `lu-toasts`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `bottom` | `bottom` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `sources` | `sources` | `Array<Observable<LuToastInput>>` | — | — | — | — |
+| `intl` | `intl` | `unknown` | — | — | — | — |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_TOAST_TRANSLATIONS` | `unknown` | — |
+
+### Services
+
+#### LuToastsService
+
+- `addToast(toastInput: LuToastInput): LuToast`
+- `removeToast(toast: LuToast): void`
+- `isOnlyDismissibleManually({ duration }: LuToastInput): boolean`
+
+### Modules dépréciés
+
+- ⚠️ `LuToastsModule` — use `LuToastsComponent` instead
+
+## Related files
+
+- 📝 [Code & implementation](./toasts.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/toasts/toasts.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/toasts/toasts.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-overlays-toasts--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
+
+~ `bottom` : transform ∅ → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Changed
+
+- Long words now wrap (`overflow-wrap`) instead of overflowing the toast.
+
+#### 21.1.3
+
+##### Fixed
+
+- `max-inline-size` of the toasts on narrow viewports.
+
+#### 21.1.0
+
+##### Changed
+
+- `intl` input now accepts partial overrides that are merged with the default translations.
+
+#### 21.0.0
+
+##### Deprecated
+
+- `LuToastsModule` — import the standalone `LuToastsComponent` instead.
+
+#### 20.3.4
+
+##### Fixed
+
+- The Angular component now imports its own styles.
+
+#### 18.3.4
+
+##### Changed
+
+- Toast message is rendered inside a paragraph.
+
+#### 18.2.0
+
+##### Deprecated
+
+- `ILuTranslation` type — use `LuTranslation` instead.
+
+##### Fixed
+
+- Toast position when a footer is present.
+
+#### 18.1.0
+
+##### Added
+
+- `message` now accepts a `PortalContent`.
+
+##### Changed
+
+- Toast UI refactored.

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

@@ -0,0 +1,86 @@
+# tooltip — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-overlays-tooltip-html-css--docs)
+
+## Angular
+
+Directive selector : `luTooltip`
+
+Un tooltip ne devrait pas contenir de HTML. Si une mise en forme est nécessaire, le popover est à privilégier.
+
+### Tooltip
+
+```js
+import { OverlayModule } from '@angular/cdk/overlay';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { IconComponent } from '@lucca-front/ng/icon';
+import { LuTooltipPanelComponent, LuTooltipTriggerDirective } from '@lucca-front/ng/tooltip';
+import { ButtonComponent } from '@lucca/prisme/button';
+```
+
+```html
+<h3>Tooltip simple</h3>
+<button
+	id="random-story-id"
+	type="button"
+	luButton
+	luTooltip="👋 Hello"
+	luTooltipEnterDelay="300"
+	luTooltipLeaveDelay="100"
+>
+	Tooltip au survol
+</button>
+<h3>Tooltip sur un texte</h3>
+<span luTooltip="👋 Hello" luTooltipEnterDelay="300" luTooltipLeaveDelay="100">Tooltip au survol</span>
+<h3>Tooltip et ellipse</h3>
+<div
+	data-testid="ellipsis-truncated"
+	class="pr-u-ellipsis"
+	style="inline-size: 10rem"
+	tabindex="0"
+	luTooltip="Ce texte est trop long pour être affiché entièrement. Le tooltip apparait au survol."
+	luTooltipEnterDelay="300"
+	luTooltipLeaveDelay="100"
+	[luTooltipWhenEllipsis]="true"
+>
+	Ce texte est trop long pour être affiché entièrement. Le tooltip apparait au survol.
+</div>
+<div
+	data-testid="ellipsis-not-truncated"
+	class="pr-u-ellipsis"
+	luTooltip="Ce texte est affiché entièrement. Le tooltip n'apparait pas au survol."
+	luTooltipEnterDelay="300"
+	luTooltipLeaveDelay="100"
+	[luTooltipWhenEllipsis]="true"
+>
+	Ce texte est affiché entièrement. Le tooltip n'apparait pas au survol.
+</div>
+<h3>Tooltip et icône (avec alternative)</h3>
+<lu-icon
+	data-testid="icon-tooltip"
+	icon="star"
+	alt="Favoris"
+	luTooltip="Favoris"
+	luTooltipEnterDelay="300"
+	luTooltipLeaveDelay="100"
+	luTooltipOnlyForDisplay="true"
+/>
+
+<h3>Tooltip affiché avec un host séparé</h3>
+<span class="pr-u-marginInlineEnd800" luTooltip="… mais apparait là !" [luTooltipAnchor]="target">
+	Tooltip déclenché ici…
+</span>
+<span aria-hidden="true" #target class="lucca-icon icon-target"></span>
+```
+
+## HTML/CSS
+
+### Html
+
+```css
+@forward '@lucca-front/scss/src/components/tooltip';
+```
+
+```html
+<div class="tooltip">{{ content }}</div>
+```