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

package/llms/references/components/grid/grid.md

@@ -0,0 +1,112 @@
+# grid
+
+## Import
+
+```typescript
+import { GridColumnComponent, GridComponent } from '@lucca-front/ng/grid';
+```
+
+## API Reference
+
+### GridColumnComponent (component)
+
+**Selectors:** `lu-grid-column`, `[lu-grid-column]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `colspan` | `colspan` | `unknown` | `null` | — | `luNullableNumberAttribute` | — |
+| `rowspan` | `rowspan` | `unknown` | `null` | — | `luNullableNumberAttribute` | — |
+| `column` | `column` | `unknown` | `null` | — | `luNullableNumberAttribute` | — |
+| `row` | `row` | `unknown` | `null` | — | `luNullableNumberAttribute` | — |
+| `align` | `align` | `GridColumnAlignment \| null` | `null` | — | — | — |
+| `justify` | `justify` | `GridColumnAlignment \| null` | `null` | — | — | — |
+| `responsive` | `responsive` | `ResponsiveConfig<GridColumnResponsive, number>` | — | — | — | — |
+
+### GridComponent (component)
+
+**Selectors:** `lu-grid`, `[lu-grid]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `container` | `container` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `columns` | `columns` | `unknown` | `null` | — | `luNullableNumberAttribute` | — |
+| `colspan` | `colspan` | `unknown` | `null` | — | `luNullableNumberAttribute` | — |
+| `rowspan` | `rowspan` | `unknown` | `null` | — | `luNullableNumberAttribute` | — |
+| `mode` | `mode` | `GridMode \| null` | `null` | — | — | — |
+| `gap` | `gap` | `Gap \| null` | `null` | — | — | — |
+| `columnGap` | `columnGap` | `Gap \| null` | `null` | — | — | — |
+| `rowGap` | `rowGap` | `Gap \| null` | `null` | — | — | — |
+
+## Type definitions
+
+- [`Gap`](../../types/Gap.md) — 13 available values
+
+## Related files
+
+- 📝 [Code & implementation](./grid.component.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
+
+`GridColumnComponent` :
+  ~ `colspan` : transform numberAttribute → luNullableNumberAttribute
+  ~ `rowspan` : transform numberAttribute → luNullableNumberAttribute
+  ~ `column` : transform numberAttribute → luNullableNumberAttribute
+  ~ `row` : transform numberAttribute → luNullableNumberAttribute
+`GridComponent` :
+  ~ `container` : transform booleanAttribute → luBooleanAttribute
+  ~ `columns` : transform numberAttribute → luNullableNumberAttribute
+  ~ `colspan` : transform numberAttribute → luNullableNumberAttribute
+  ~ `rowspan` : transform numberAttribute → luNullableNumberAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `GRID_GAP`, `GRID_MODE`, `GRID_COLUMN_ALIGNMENT` and `GRID_COLUMN_RESPONSIVE` constants, together with the `Gap`, `GridMode`, `GridColumnAlignment` and `GridColumnResponsive` types, are now publicly exported and used to type the grid inputs.
+
+#### 21.0.0
+
+##### Added
+
+- `colspan` and `rowspan` inputs on `lu-grid-column`.
+
+#### 20.3.2
+
+##### Changed
+
+- `lu-grid` and `lu-grid-column` can now be used as attribute selectors (`[lu-grid]`, `[lu-grid-column]`) to keep a semantic host element.
+
+#### 20.3.1
+
+##### Fixed
+
+- `responsive` input parsing for responsive column definitions.
+
+#### 20.3.0
+
+##### Added
+
+- `lu-grid` component (`grid`) with the `columns`, `mode`, `gap`, `columnGap`, `rowGap`, `container`, `align` and `justify` inputs, and the `LU_GRID_INSTANCE` injection token.
+- `lu-grid-column` component with the `column`, `row` and `responsive` inputs.
+
+#### 18.3.0
+
+##### Changed
+
+- Reverted the grid width management introduced earlier and fixed the grid `max-inline-size`.
+
+#### 18.1.1
+
+##### Changed
+
+- Default grid gap set to the `150` spacing token.

package/llms/references/components/highlight-data/highlight-data.component.md

@@ -0,0 +1,279 @@
+# highlight-data — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-highlight-data-angular-basic--docs)
+
+## Angular
+
+Component selector : `lu-highlight-data`
+
+### Basic
+
+```js
+import { provideRouter } from '@angular/router';
+import { ButtonComponent } from '@lucca-front/ng/button';
+import { HIGHLIGHT_DATA_BUBBLE, HIGHLIGHT_DATA_ILLUSTRATION, HIGHLIGHT_DATA_PALETTE, HIGHLIGHT_DATA_SIZE, HIGHLIGHT_DATA_THEME, HighlightDataComponent } from '@lucca-front/ng/highlight-data';
+import { LinkComponent } from '@lucca-front/ng/link';
+```
+
+```html
+<lu-highlight-data heading="Title" value="Content" bubble="1" illustration="piggy-bank"></lu-highlight-data>
+```
+
+## HTML/CSS
+
+Classe CSS : `.highlightData`
+
+### Action illustration
+
+```css
+@forward '@lucca-front/scss/src/components/highlightData';
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<div class="highlightData">
+	<dl class="highlightData-content">
+		<dt class="highlightData-content-title">Title</dt>
+		<dd class="highlightData-content-value">Content</dd>
+		<dd class="highlightData-content-action"><button type="button" class="button mod-outlined">Action</button></dd>
+	</dl>
+	<div class="highlightData-illustrations">
+		<img
+			alt=""
+			class="highlightData-illustrations-back"
+			src="https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/lucca/bubbles-light-1.svg"
+		/>
+		<img
+			alt=""
+			class="highlightData-illustrations-front"
+			src="https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/generic/polaroid-male.svg"
+		/>
+	</div>
+</div>
+```
+
+### Action
+
+```css
+@forward '@lucca-front/scss/src/components/highlightData';
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<div class="highlightData">
+	<dl class="highlightData-content">
+		<dt class="highlightData-content-title">Title</dt>
+		<dd class="highlightData-content-value">Content</dd>
+		<dd class="highlightData-content-action"><button type="button" class="button mod-outlined">Action</button></dd>
+	</dl>
+</div>
+```
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/highlightData';
+```
+
+```html
+<div class="highlightData">
+	<dl class="highlightData-content">
+		<dt class="highlightData-content-title">Title</dt>
+		<dd class="highlightData-content-value">Content</dd>
+	</dl>
+	<div class="highlightData-illustrations">
+		<img
+			alt=""
+			class="highlightData-illustrations-back"
+			src="https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/lucca/bubbles-light-1.svg"
+		/>
+		<img
+			alt=""
+			class="highlightData-illustrations-front"
+			src="https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/generic/piggy-bank.svg"
+		/>
+	</div>
+</div>
+```
+
+### Infos
+
+```css
+@forward '@lucca-front/scss/src/components/highlightData';
+```
+
+```html
+<div class="highlightData mod-valueFirst">
+	<dl class="highlightData-content">
+		<dt class="highlightData-content-title">Title</dt>
+		<dd class="highlightData-content-value">Content</dd>
+	</dl>
+	<div class="highlightData-illustrations">
+		<img
+			alt=""
+			class="highlightData-illustrations-back"
+			src="https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/lucca/bubbles-light-1.svg"
+		/>
+		<img
+			alt=""
+			class="highlightData-illustrations-front"
+			src="https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/generic/piggy-bank.svg"
+		/>
+	</div>
+</div>
+```
+
+### Nested
+
+```css
+@forward '@lucca-front/scss/src/components/highlightData';
+```
+
+```html
+<div class="highlightData mod-nested">
+	<dl class="highlightData-content">
+		<dt class="highlightData-content-title">Title</dt>
+		<dd class="highlightData-content-value">Content</dd>
+	</dl>
+	<div class="highlightData-illustrations">
+		<img
+			alt=""
+			class="highlightData-illustrations-back"
+			src="https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/lucca/bubbles-light-1.svg"
+		/>
+		<img
+			alt=""
+			class="highlightData-illustrations-front"
+			src="https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/generic/piggy-bank.svg"
+		/>
+	</div>
+</div>
+```
+
+### No illustration
+
+```css
+@forward '@lucca-front/scss/src/components/highlightData';
+```
+
+```html
+<div class="highlightData">
+	<dl class="highlightData-content">
+		<dt class="highlightData-content-title">Title</dt>
+		<dd class="highlightData-content-value">Content</dd>
+	</dl>
+</div>
+```
+
+### Bubble
+
+```css
+@forward '@lucca-front/scss/src/components/highlightData';
+```
+
+```html
+<div class="highlightData">
+	<dl class="highlightData-content">
+		<dt class="highlightData-content-title">Title</dt>
+		<dd class="highlightData-content-value">Content</dd>
+	</dl>
+	<div class="highlightData-illustrations">
+		<img
+			alt=""
+			class="highlightData-illustrations-back"
+			src="https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/lucca/bubbles-light-1.svg"
+		/>
+	</div>
+</div>
+```
+
+### Sizes
+
+```css
+@forward '@lucca-front/scss/src/components/highlightData';
+```
+
+```html
+<div class="highlightData mod-S">
+	<dl class="highlightData-content">
+		<dt class="highlightData-content-title">Title</dt>
+		<dd class="highlightData-content-value">Content</dd>
+	</dl>
+	<div class="highlightData-illustrations">
+		<img
+			alt=""
+			class="highlightData-illustrations-back"
+			src="https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/lucca/bubbles-light-1.svg"
+		/>
+		<img
+			alt=""
+			class="highlightData-illustrations-front"
+			src="https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/generic/piggy-bank.svg"
+		/>
+	</div>
+</div>
+<div class="highlightData mod-XS">
+	<dl class="highlightData-content">
+		<dt class="highlightData-content-title">Title</dt>
+		<dd class="highlightData-content-value">Content</dd>
+	</dl>
+	<div class="highlightData-illustrations">
+		<img
+			alt=""
+			class="highlightData-illustrations-back"
+			src="https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/lucca/bubbles-light-1.svg"
+		/>
+		<img
+			alt=""
+			class="highlightData-illustrations-front"
+			src="https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/generic/piggy-bank.svg"
+		/>
+	</div>
+</div>
+```
+
+### Themes
+
+```css
+@forward '@lucca-front/scss/src/components/highlightData';
+```
+
+```html
+<div class="highlightData mod-light">
+	<dl class="highlightData-content">
+		<dt class="highlightData-content-title">Title</dt>
+		<dd class="highlightData-content-value">Content</dd>
+	</dl>
+	<div class="highlightData-illustrations">
+		<img
+			alt=""
+			class="highlightData-illustrations-back"
+			src="https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/lucca/bubbles-light-1.svg"
+		/>
+		<img
+			alt=""
+			class="highlightData-illustrations-front"
+			src="https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/generic/piggy-bank.svg"
+		/>
+	</div>
+</div>
+
+<div class="highlightData mod-dark">
+	<dl class="highlightData-content">
+		<dt class="highlightData-content-title">Title</dt>
+		<dd class="highlightData-content-value">Content</dd>
+	</dl>
+	<div class="highlightData-illustrations">
+		<img
+			alt=""
+			class="highlightData-illustrations-back"
+			src="https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/lucca/bubbles-dark-1.svg"
+		/>
+		<img
+			alt=""
+			class="highlightData-illustrations-front"
+			src="https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/generic/piggy-bank.svg"
+		/>
+	</div>
+</div>
+```

package/llms/references/components/highlight-data/highlight-data.md

@@ -0,0 +1,115 @@
+# highlight-data
+
+## Import
+
+```typescript
+import { HighlightDataComponent } from '@lucca-front/ng/highlight-data';
+```
+
+## Basic Usage
+
+```html
+<lu-highlight-data heading="Title" value="Content" bubble="1" illustration="piggy-bank"></lu-highlight-data>
+```
+
+## API Reference
+
+### HighlightDataComponent (component)
+
+**Selector:** `lu-highlight-data`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `heading` | `heading` | `PortalContent` | — | ✅ | — | Titre du composant. [PortalContent] |
+| `value` | `value` | `PortalContent` | — | ✅ | — | Valeur affichée. [PortalContent] |
+| `subText` | `subText` | `PortalContent` | — | — | — | Texte secondaire. [PortalContent] |
+| `bubble` | `bubble` | `HighlightDataBubble \| number` | `undefined` | — | `luOptionalNumberAttribute` | — |
+| `theme` | `theme` | `'white' \| 'light' \| 'dark'` | `'white'` | — | — | — |
+| `palette` | `palette` | `HighlightDataPalette \| string` | `'lucca'` | — | — | La palette influençant également la couleur du SVG des bubbles et donc l’URL associée, il est nécessaire de renseigner l… |
+| `illustration` | `illustration` | `HighlightDataIllustration \| string` | — | — | — | Il est également possible de renseigner une URL. |
+| `size` | `size` | `HighlightDataSize \| null` | `null` | — | — | — |
+| `valueFirst` | `valueFirst` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `nested` | `nested` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+## Type definitions
+
+- [`HighlightDataIllustration`](../../types/HighlightDataIllustration.md) — 14 available values
+
+## Related files
+
+- 📝 [Code & implementation](./highlight-data.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/highlight-data/highlight-data.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/highlight-data/highlight-data.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-highlight-data-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
+
+~ `bubble` : défaut ∅ → undefined, transform ∅ → luOptionalNumberAttribute
+~ `valueFirst` : transform booleanAttribute → luBooleanAttribute
+~ `nested` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.1
+
+##### Added
+
+- `post-it-success` and `post-it-warning` values for the `illustration` input.
+
+#### 21.3.0
+
+##### Added
+
+- `HIGHLIGHT_DATA_THEME`, `HIGHLIGHT_DATA_PALETTE`, `HIGHLIGHT_DATA_SIZE`, `HIGHLIGHT_DATA_BUBBLE` and `HIGHLIGHT_DATA_ILLUSTRATION` constants, together with their matching types, are now publicly exported and used to type the component inputs.
+
+#### 21.1.3
+
+##### Fixed
+
+- Typos in some `illustration` values.
+
+#### 21.0.4
+
+##### Fixed
+
+- Default color of the component.
+
+#### 21.0.3
+
+##### Fixed
+
+- `subText` position when no `illustration` is provided.
+
+#### 20.3.2
+
+##### Fixed
+
+- Spacing between the actions.
+
+#### 20.2.0
+
+##### Added
+
+- `nested` input to display the highlight inside another surface.
+
+#### 19.3.3
+
+##### Added
+
+- `heading`, `value` and `subText` inputs now also accept a `PortalContent`.
+
+##### Fixed
+
+- Rendering without `illustration` and with `valueFirst` enabled.
+
+#### 19.3.0
+
+##### Added
+
+- `lu-highlight-data` component (`highlightData`) with the `heading`, `value`, `subText`, `illustration`, `bubble`, `palette`, `size`, `theme` and `valueFirst` inputs.

package/llms/references/components/highlight-section/highlight-section.component.md

@@ -0,0 +1,185 @@
+# highlight-section — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-highlight-section-angular-basic--docs)
+
+## Angular
+
+### Basic
+
+```js
+import { HIGHLIGHT_SECTION_BUBBLE, HIGHLIGHT_SECTION_ILLUSTRATION, HIGHLIGHT_SECTION_PALETTE, HIGHLIGHT_SECTION_THEME, HighlightSectionComponent } from '@lucca-front/ng/highlight-section';
+```
+
+```html
+<lu-highlight-section theme="light">Content</lu-highlight-section>
+```
+
+## HTML/CSS
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/highlightSection';
+```
+
+```html
+<div class="highlightSection mod-light">
+	<div
+		class="highlightSection-bubbleStart"
+		[innerHtml]="'https://cdn.lucca.fr/transverse/prisme/visuals/highlight-section/bubbles-1.svg' | luSafeExternalSvg"
+	></div>
+	<div
+		class="highlightSection-bubbleEnd"
+		[innerHtml]="'https://cdn.lucca.fr/transverse/prisme/visuals/highlight-section/bubbles-1.svg' | luSafeExternalSvg"
+	></div>
+	<div class="highlightSection-content">
+		<div class="highlightSection-content-slot">
+			<p class="pr-u-fontWeightSemiBold">Créez des politiques de frais pour ces unités légales</p>
+			<p class="pr-u-bodyS">Allemagne : Lucca Deutschland — Suisse : Lucca Switzerland — Royaume-Uni : Lucca UK.</p>
+		</div>
+	</div>
+</div>
+```
+
+### Illustration
+
+```css
+@forward '@lucca-front/scss/src/components/highlightSection';
+@forward '@lucca-front/scss/src/components/link';
+```
+
+```html
+<div class="highlightSection mod-light">
+	<div
+		class="highlightSection-bubbleStart"
+		[innerHtml]="'https://cdn.lucca.fr/transverse/prisme/visuals/highlight-section/bubbles-1.svg' | luSafeExternalSvg"
+	></div>
+	<div class="highlightSection-content">
+		<div class="highlightSection-content-slot">
+			<p class="pr-u-fontWeightSemiBold">Baromètre express</p>
+			<p class="pr-u-bodyS">
+				8 questions – Identifiez rapidement les grandes tendances et les priorités d’action de votre organisation avec
+				ce modèle.
+			</p>
+			<p><a class="link" href="#">Utiliser le modèle</a></p>
+		</div>
+		<img
+			alt=""
+			class="highlightSection-content-illustration"
+			src="https://cdn.lucca.fr/transverse/prisme/visuals/highlight-section/pola.svg"
+		/>
+	</div>
+</div>
+```
+
+### Ornaments
+
+```css
+@forward '@lucca-front/scss/src/components/highlightSection';
+```
+
+```html
+<div class="highlightSection mod-light">
+	<div
+		class="highlightSection-bubbleStart"
+		[innerHtml]="'https://cdn.lucca.fr/transverse/prisme/visuals/highlight-section/bubbles-1.svg' | luSafeExternalSvg"
+	></div>
+	<div
+		class="highlightSection-bubbleEnd"
+		[innerHtml]="'https://cdn.lucca.fr/transverse/prisme/visuals/highlight-section/bubbles-1.svg' | luSafeExternalSvg"
+	></div>
+	<div class="highlightSection-content">
+		<div class="highlightSection-content-slot">
+			<p class="pr-u-fontWeightSemiBold">Both</p>
+		</div>
+	</div>
+</div>
+
+<div class="highlightSection mod-light">
+	<div
+		class="highlightSection-bubbleStart"
+		[innerHtml]="'https://cdn.lucca.fr/transverse/prisme/visuals/highlight-section/bubbles-1.svg' | luSafeExternalSvg"
+	></div>
+	<div class="highlightSection-content">
+		<div class="highlightSection-content-slot">
+			<p class="pr-u-fontWeightSemiBold">Start</p>
+		</div>
+	</div>
+</div>
+
+<div class="highlightSection mod-light">
+	<div
+		class="highlightSection-bubbleEnd"
+		[innerHtml]="'https://cdn.lucca.fr/transverse/prisme/visuals/highlight-section/bubbles-1.svg' | luSafeExternalSvg"
+	></div>
+	<div class="highlightSection-content">
+		<div class="highlightSection-content-slot">
+			<p class="pr-u-fontWeightSemiBold">End</p>
+		</div>
+	</div>
+</div>
+
+<div class="highlightSection mod-light">
+	<div class="highlightSection-content">
+		<div class="highlightSection-content-slot">
+			<p class="pr-u-fontWeightSemiBold">None</p>
+		</div>
+	</div>
+</div>
+```
+
+### Themes
+
+```css
+@forward '@lucca-front/scss/src/components/highlightSection';
+```
+
+```html
+<div class="highlightSection">
+	<div
+		class="highlightSection-bubbleStart"
+		[innerHtml]="'https://cdn.lucca.fr/transverse/prisme/visuals/highlight-section/bubbles-1.svg' | luSafeExternalSvg"
+	></div>
+	<div
+		class="highlightSection-bubbleEnd"
+		[innerHtml]="'https://cdn.lucca.fr/transverse/prisme/visuals/highlight-section/bubbles-1.svg' | luSafeExternalSvg"
+	></div>
+	<div class="highlightSection-content">
+		<div class="highlightSection-content-slot">
+			<p class="pr-u-fontWeightSemiBold">White</p>
+		</div>
+	</div>
+</div>
+
+<div class="highlightSection mod-light">
+	<div
+		class="highlightSection-bubbleStart"
+		[innerHtml]="'https://cdn.lucca.fr/transverse/prisme/visuals/highlight-section/bubbles-1.svg' | luSafeExternalSvg"
+	></div>
+	<div
+		class="highlightSection-bubbleEnd"
+		[innerHtml]="'https://cdn.lucca.fr/transverse/prisme/visuals/highlight-section/bubbles-1.svg' | luSafeExternalSvg"
+	></div>
+	<div class="highlightSection-content">
+		<div class="highlightSection-content-slot">
+			<p class="pr-u-fontWeightSemiBold">Light</p>
+		</div>
+	</div>
+</div>
+
+<div class="highlightSection mod-dark">
+	<div
+		class="highlightSection-bubbleStart"
+		[innerHtml]="'https://cdn.lucca.fr/transverse/prisme/visuals/highlight-section/bubbles-1.svg' | luSafeExternalSvg"
+	></div>
+	<div
+		class="highlightSection-bubbleEnd"
+		[innerHtml]="'https://cdn.lucca.fr/transverse/prisme/visuals/highlight-section/bubbles-1.svg' | luSafeExternalSvg"
+	></div>
+	<div class="highlightSection-content">
+		<div class="highlightSection-content-slot">
+			<p class="pr-u-fontWeightSemiBold">Dark</p>
+		</div>
+	</div>
+</div>
+```