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

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

@@ -0,0 +1,436 @@
+# comment — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-texts-comment-angular-ai--docs)
+
+## Angular
+
+Component selector : `lu-comment`
+
+###
+
+### Ai
+
+```js
+import { CommentBlockComponent, CommentChatComponent, CommentComponent } from '@lucca-front/ng/comment';
+import { LuUserPictureModule } from '@lucca-front/ng/user';
+import { LOCALE_ID } from '@angular/core';
+```
+
+```html
+<lu-comment-chat>
+	<lu-comment-block compact [avatar]="avatarAI" authorName="Assistant IA">
+		<ng-template #avatarAI>
+			<lu-user-picture AI />
+		</ng-template>
+		<lu-comment [date]="date" content="Bonjour, comment puis-je vous accompagner aujourd’hui ?" />
+	</lu-comment-block>
+	<lu-comment-block chatAnswer compact [avatar]="avatarTpl" authorName="Chloé Alibert">
+		<ng-template #avatarTpl>
+			<lu-user-picture [user]="{ firstName: 'Chloé', lastName: 'Alibert' }" />
+		</ng-template>
+		<lu-comment [date]="date" content="Lorem ipsum dolor sit amet…" />
+	</lu-comment-block>
+</lu-comment-chat>
+```
+
+### Basic
+
+```js
+import { CommentBlockComponent, CommentComponent } from '@lucca-front/ng/comment';
+```
+
+```html
+<lu-comment-block [avatar]="avatarTpl" authorName="Marie Bragoulet">
+	<ng-template #avatarTpl>
+		<lu-user-picture [user]="{ firstName: 'Marie', lastName: 'Bragoulet' }" />
+	</ng-template>
+	<lu-comment
+		[date]="date"
+		content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus a veniam necessitatibus aut facilis repellendus provident nulla iste neque ex?"
+	/>
+	<lu-comment [date]="date" content="Lorem ipsum dolor sit amet." />
+	<lu-comment
+		[date]="date"
+		content="<h3>Lorem, ipsum.</h3>
+	<p>
+		Lorem ipsum, dolor sit amet consectetur adipisicing elit. <strong>Facilis voluptates ex</strong> qui iste libero suscipit cum
+		earum harum animi praesentium, quidem non incidunt vel illum sunt nihil reprehenderit a itaque.
+	</p>
+	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque numquam itaque at facilis iusto inventore.</p>"
+	/>
+</lu-comment-block>
+```
+
+### Chat
+
+```js
+import { CommentBlockComponent, CommentChatComponent, CommentComponent } from '@lucca-front/ng/comment';
+```
+
+```html
+<lu-comment-chat>
+	<lu-comment-block [avatar]="avatarTpl" authorName="Marie Bragoulet">
+		<ng-template #avatarTpl>
+			<lu-user-picture [user]="{ firstName: 'Marie', lastName: 'Bragoulet' }" />
+		</ng-template>
+		<lu-comment
+			[date]="date"
+			content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus a veniam necessitatibus aut facilis repellendus provident nulla iste neque ex?"
+		/>
+		<lu-comment [date]="date" content="Lorem ipsum dolor sit amet." />
+		<lu-comment
+			[date]="date"
+			content="<h3>Lorem, ipsum.</h3>
+	<p>
+		Lorem ipsum, dolor sit amet consectetur adipisicing elit. <strong>Facilis voluptates ex</strong> qui iste libero suscipit cum
+		earum harum animi praesentium, quidem non incidunt vel illum sunt nihil reprehenderit a itaque.
+	</p>
+	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque numquam itaque at facilis iusto inventore.</p>"
+		/>
+	</lu-comment-block>
+	<lu-comment-block [chatAnswer]="true" [avatar]="avatarTpl2" authorName="Chloé Alibert">
+		<ng-template #avatarTpl2>
+			<lu-user-picture [user]="{ firstName: 'Chloé', lastName: 'Alibert' }" />
+		</ng-template>
+		<lu-comment
+			[date]="date"
+			content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus a veniam necessitatibus aut facilis repellendus provident nulla iste neque ex?"
+		/>
+	</lu-comment-block>
+</lu-comment-chat>
+```
+
+## HTML/CSS
+
+Classe CSS : `.comment`
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/comment';
+@forward '@lucca-front/scss/src/components/avatar';
+```
+
+```html
+<div class="comment">
+	<div class="comment-infos">
+		<div class="avatar"></div>
+		<div class="comment-infos-content">
+			<span class="comment-infos-name">Marie Bragoulet</span>
+			&ngsp;
+			<time class="comment-infos-date" datetime="2024-01-04T16:50:00+00:00">Lun. 4 janv. à 16:50</time>
+		</div>
+	</div>
+	<blockquote class="comment-content">
+		<p class="comment-content-text">
+			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus a veniam necessitatibus aut facilis
+			repellendus provident nulla iste neque ex?
+		</p>
+	</blockquote>
+</div>
+```
+
+### Chat
+
+```css
+@forward '@lucca-front/scss/src/components/comment';
+@forward '@lucca-front/scss/src/components/avatar';
+```
+
+```html
+<ol class="commentWrapperChat">
+	<li class="commentWrapper">
+		<div class="commentWrapper-item">
+			<div class="comment">
+				<div class="comment-infos">
+					<div class="avatar"></div>
+					<div class="comment-infos-content">
+						<span class="comment-infos-name">Marie Bragoulet</span>
+						&ngsp;
+						<time class="comment-infos-date" datetime="2024-01-04T16:50:00+00:00">Lun. 4 janv. à 16:50</time>
+					</div>
+				</div>
+				<blockquote class="comment-content">
+					<p class="comment-content-text">
+						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus a veniam necessitatibus aut facilis
+						repellendus provident nulla iste neque ex ?
+					</p>
+				</blockquote>
+			</div>
+		</div>
+	</li>
+	<li class="commentWrapper mod-chatAnswer">
+		<div class="commentWrapper-item">
+			<div class="comment">
+				<div class="comment-infos">
+					<div class="avatar"></div>
+					<div class="comment-infos-content">
+						<span class="comment-infos-name">Daniel Hernandez</span>
+						&ngsp;
+						<time class="comment-infos-date" datetime="2024-01-04T16:50:00+00:00">Lun. 4 janv. à 16:50</time>
+					</div>
+				</div>
+				<blockquote class="comment-content">
+					<p class="comment-content-text">
+						Temporibus a veniam necessitatibus aut facilis repellendus provident nulla iste neque ex. Lorem ipsum dolor
+						sit amet, consectetur adipisicing elit.
+					</p>
+				</blockquote>
+			</div>
+		</div>
+	</li>
+	<li class="commentWrapper">
+		<div class="commentWrapper-item">
+			<div class="comment">
+				<div class="comment-infos">
+					<div class="avatar"></div>
+					<div class="comment-infos-content">
+						<span class="comment-infos-name">Marie Bragoulet</span>
+						&ngsp;
+						<time class="comment-infos-date" datetime="2024-01-04T16:50:00+00:00">Lun. 4 janv. à 16:50</time>
+					</div>
+				</div>
+				<blockquote class="comment-content">
+					<p class="comment-content-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+				</blockquote>
+			</div>
+		</div>
+	</li>
+	<li class="commentWrapper mod-chatAnswer">
+		<div class="commentWrapper-item">
+			<div class="comment">
+				<div class="comment-infos">
+					<div class="avatar"></div>
+					<div class="comment-infos-content">
+						<span class="comment-infos-name">Daniel Hernandez</span>
+						&ngsp;
+						<time class="comment-infos-date" datetime="2024-01-04T16:50:00+00:00">Lun. 4 janv. à 16:50</time>
+					</div>
+				</div>
+				<blockquote class="comment-content">
+					<p class="comment-content-text">Lorem ipsum dolor sit amet,</p>
+				</blockquote>
+			</div>
+		</div>
+	</li>
+	<li class="commentWrapper mod-chatAnswer">
+		<div class="commentWrapper-item">
+			<div class="comment">
+				<div class="comment-infos">
+					<div class="avatar"></div>
+					<div class="comment-infos-content">
+						<span class="comment-infos-name">Daniel Hernandez</span>
+						&ngsp;
+						<time class="comment-infos-date" datetime="2024-01-04T16:50:00+00:00">Lun. 4 janv. à 16:50</time>
+					</div>
+				</div>
+				<blockquote class="comment-content">
+					<p class="comment-content-text">Lorem</p>
+				</blockquote>
+			</div>
+		</div>
+	</li>
+</ol>
+```
+
+### Avatar
+
+```css
+@forward '@lucca-front/scss/src/components/comment';
+```
+
+```html
+<div class="comment mod-noAvatar">
+	<div class="comment-infos">
+		<div class="comment-infos-content">
+			<span class="comment-infos-name">Marie Bragoulet</span>
+			&ngsp;
+			<time class="comment-infos-date" datetime="2024-01-04T16:50:00+00:00">Lun. 4 janv. à 16:50</time>
+		</div>
+	</div>
+	<blockquote class="comment-content">
+		<p class="comment-content-text">
+			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus a veniam necessitatibus aut facilis
+			repellendus provident nulla iste neque ex?
+		</p>
+	</blockquote>
+</div>
+```
+
+### RichText
+
+```css
+@forward '@lucca-front/scss/src/components/comment';
+@forward '@lucca-front/scss/src/components/avatar';
+```
+
+```html
+<div class="comment">
+	<div class="comment-infos">
+		<div class="avatar"></div>
+		<div class="comment-infos-content">
+			<span class="comment-infos-name">Marie Bragoulet</span>
+			&ngsp;
+			<time class="comment-infos-date" datetime="2024-01-04T16:50:00+00:00">Lun. 4 janv. à 16:50</time>
+		</div>
+	</div>
+	<blockquote class="comment-content">
+		<div class="comment-content-textContainerOptional">
+			<h3>Lorem, ipsum.</h3>
+			<p>
+				Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+				<strong>Facilis voluptates ex</strong>
+				qui iste libero suscipit cum earum harum animi praesentium, quidem non incidunt vel illum sunt nihil
+				reprehenderit a itaque.
+			</p>
+			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque numquam itaque at facilis iusto inventore.</p>
+		</div>
+	</blockquote>
+</div>
+```
+
+### Small
+
+```css
+@forward '@lucca-front/scss/src/components/comment';
+@forward '@lucca-front/scss/src/components/avatar';
+```
+
+```html
+<div class="comment mod-S">
+	<div class="comment-infos">
+		<div class="avatar"></div>
+		<div class="comment-infos-content">
+			<span class="comment-infos-name">Marie Bragoulet</span>
+			&ngsp;
+			<time class="comment-infos-date" datetime="2024-01-04T16:50:00+00:00">Lun. 4 janv. à 16:50</time>
+		</div>
+	</div>
+	<blockquote class="comment-content">
+		<p class="comment-content-text">
+			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus a veniam necessitatibus aut facilis
+			repellendus provident nulla iste neque ex?
+		</p>
+	</blockquote>
+</div>
+```
+
+### Compact
+
+```css
+@forward '@lucca-front/scss/src/components/comment';
+@forward '@lucca-front/scss/src/components/avatar';
+```
+
+```html
+<ol class="commentWrapper mod-compact">
+	<li class="commentWrapper-item">
+		<div class="comment">
+			<div class="comment-infos">
+				<div class="avatar"></div>
+				<div class="comment-infos-content">
+					<span class="comment-infos-name">Marie Bragoulet</span>
+					&ngsp;
+					<time class="comment-infos-date" datetime="2024-01-04T16:50:00+00:00">Lun. 4 janv. à 16:50</time>
+				</div>
+			</div>
+			<blockquote class="comment-content">
+				<p class="comment-content-text">
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus a veniam necessitatibus aut facilis
+					repellendus provident nulla iste neque ex?
+				</p>
+			</blockquote>
+		</div>
+	</li>
+	<li class="commentWrapper-item">
+		<div class="comment">
+			<div class="comment-infos">
+				<div class="avatar"></div>
+				<div class="comment-infos-content">
+					<span class="comment-infos-name">Marie Bragoulet</span>
+					&ngsp;
+					<time class="comment-infos-date" datetime="2024-01-04T16:50:00+00:00">Lun. 4 janv. à 16:50</time>
+				</div>
+			</div>
+			<blockquote class="comment-content">
+				<p class="comment-content-text">Lorem ipsum dolor sit amet</p>
+			</blockquote>
+		</div>
+	</li>
+	<li class="commentWrapper-item">
+		<div class="comment">
+			<div class="comment-infos">
+				<div class="avatar"></div>
+				<div class="comment-infos-content">
+					<span class="comment-infos-name">Marie Bragoulet</span>
+					&ngsp;
+					<time class="comment-infos-date" datetime="2024-01-04T16:50:00+00:00">Lun. 4 janv. à 16:50</time>
+				</div>
+			</div>
+			<blockquote class="comment-content">
+				<p class="comment-content-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+			</blockquote>
+		</div>
+	</li>
+</ol>
+```
+
+### Wrapper
+
+```css
+@forward '@lucca-front/scss/src/components/comment';
+@forward '@lucca-front/scss/src/components/avatar';
+```
+
+```html
+<ol class="commentWrapper">
+	<li class="commentWrapper-item">
+		<div class="comment">
+			<div class="comment-infos">
+				<div class="avatar"></div>
+				<div class="comment-infos-content">
+					<span class="comment-infos-name">Marie Bragoulet</span>
+					&ngsp;
+					<time class="comment-infos-date" datetime="2024-01-04T16:50:00+00:00">Lun. 4 janv. à 16:50</time>
+				</div>
+			</div>
+			<blockquote class="comment-content">
+				<p class="comment-content-text">
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus a veniam necessitatibus aut facilis
+					repellendus provident nulla iste neque ex?
+				</p>
+			</blockquote>
+		</div>
+	</li>
+	<li class="commentWrapper-item">
+		<div class="comment">
+			<div class="comment-infos">
+				<div class="avatar"></div>
+				<div class="comment-infos-content">
+					<span class="comment-infos-name">Marie Bragoulet</span>
+					&ngsp;
+					<time class="comment-infos-date" datetime="2024-01-04T16:50:00+00:00">Lun. 4 janv. à 16:50</time>
+				</div>
+			</div>
+			<blockquote class="comment-content">
+				<p class="comment-content-text">Lorem ipsum dolor sit amet,</p>
+			</blockquote>
+		</div>
+	</li>
+	<li class="commentWrapper-item">
+		<div class="comment">
+			<div class="comment-infos">
+				<div class="avatar"></div>
+				<div class="comment-infos-content">
+					<span class="comment-infos-name">Marie Bragoulet</span>
+					&ngsp;
+					<time class="comment-infos-date" datetime="2024-01-04T16:50:00+00:00">Lun. 4 janv. à 16:50</time>
+				</div>
+			</div>
+			<blockquote class="comment-content">
+				<p class="comment-content-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+			</blockquote>
+		</div>
+	</li>
+</ol>
+```

package/llms/references/components/comment/comment.md

@@ -0,0 +1,125 @@
+# comment
+
+## Import
+
+```typescript
+import { CommentBlockComponent, CommentChatComponent, CommentComponent } from '@lucca-front/ng/comment';
+```
+
+## Basic Usage
+
+```html
+<lu-comment-block [avatar]="avatarTpl" authorName="Marie Bragoulet"> <ng-template #avatarTpl> <lu-user-picture [user]="{firstName: 'Marie', lastName: 'Bragoulet'}" /> </ng-template> <lu-comment [date]="date" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus a veniam necessitatibus aut facilis repellendus provident nulla iste neque ex?" /> <lu-comment [date]="date" content="Lorem ipsum dolor sit amet." /> <lu-comment [date]="date" content="<h3>Lorem, ipsum.</h3> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. <strong>Facilis voluptates ex</strong> qui iste libero suscipit cum earum harum animi praesentium, quidem non incidunt vel illum sunt nihil reprehenderit a itaque. </p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque numquam itaque at facilis iusto inventore.</p>" />
+</lu-comment-block>
+```
+
+## API Reference
+
+### CommentBlockComponent (component)
+
+**Selector:** `lu-comment-block`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `compact` | `compact` | `boolean` | `false` | — | `luBooleanAttribute` | N’affiche l’auteur que sur le premier commentaire de |
+| `small` | `small` | `boolean` | `false` | — | `luBooleanAttribute` | Modifie la taille du composant. |
+| `chatAnswer` | `chatAnswer` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `authorName` | `authorName` | `PortalContent` | — | — | — | — |
+| `avatar` | `avatar` | `TemplateRef<unknown>` | — | — | — | — |
+| `size` | `size` | `'S' \| 'M'` | — | — | — | — |
+
+### CommentChatComponent (component)
+
+**Selector:** `lu-comment-chat`
+
+### CommentComponent (component)
+
+**Selector:** `lu-comment`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `content` | `content` | `PortalContent` | — | ✅ | — | — |
+| `date` | `date` | `Date` | — | — | — | Modifie la date du commentaire. |
+| `datePipeFormat` | `datePipeFormat` | `string \| undefined` | `undefined` | — | — | [v20.3] Modifie le format de date affiché, via Angular DatePipe. Exemples : 'mediumDate', 'YYYY', etc. |
+| `noInfos` | `noInfos` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `plainText` | `plainText` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+## Related files
+
+- 📝 [Code & implementation](./comment.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/comment/comment.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/comment/comment.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-texts-comment-angular-ai--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
+
+`CommentBlockComponent` :
+  ~ `compact` : transform booleanAttribute → luBooleanAttribute
+  ~ `small` : transform booleanAttribute → luBooleanAttribute
+  ~ `chatAnswer` : transform booleanAttribute → luBooleanAttribute
+`CommentComponent` :
+  ~ `noInfos` : transform booleanAttribute → luBooleanAttribute
+  ~ `plainText` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Fixed
+
+- `.comment-content-text` now wraps long unbreakable strings such as links using `overflow-wrap: anywhere`.
+
+#### 21.2.0
+
+##### Added
+
+- `noInfos` input on `lu-comment` to hide the comment header (avatar, author name and date).
+- `lu-comment` can now be used standalone, outside of a `lu-comment-block`.
+
+##### Changed
+
+- `content` input on `lu-comment` is now required and accepts a `PortalContent` (string, `TemplateRef` or component) instead of only a `string`.
+
+#### 20.3.0
+
+##### Added
+
+- `datePipeFormat` input on `lu-comment` to force the date pipe to display the date with a specific format.
+
+#### 20.1.0
+
+##### Removed
+
+- `.comment-content-textContainer` deprecated CSS class.
+
+#### 18.3.1
+
+##### Fixed
+
+- `.comment-content-textContainerOptional` CSS class renamed from the misspelled `.comment-content-textContainerOptionnal`.
+
+#### 18.3.0
+
+##### Added
+
+- `lu-comment`, `lu-comment-block` and `lu-comment-chat` Angular components wrapping the comment styles.
+
+#### 18.1.5
+
+##### Fixed
+
+- `.comment-infos-content` spacing and small (`S`) size styling.
+
+#### 18.1.0
+
+##### Added
+
+- `comment` SCSS component.

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

@@ -0,0 +1,41 @@
+# container — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-container-angular-basic--docs)
+
+## Angular
+
+Mots-clés : conteneur, wrapper
+
+Component selector : `lu-container`
+
+### Basic
+
+```js
+import { CONTAINER_SIZE, ContainerComponent } from '@lucca-front/ng/container';
+```
+
+```html
+<lu-container>
+	<div class="fakeContent">container</div>
+</lu-container>
+<lu-container>
+	<div class="fakeContent">container</div>
+</lu-container>
+<lu-container>
+	<div class="fakeContent">container</div>
+</lu-container>
+```
+
+## HTML/CSS
+
+Classe CSS : `.container`
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/container';
+```
+
+```html
+<div class="container">Ce container est responsive et sert à placer le contenu de votre page.</div>
+```

package/llms/references/components/container/container.md

@@ -0,0 +1,74 @@
+# container
+
+## Import
+
+```typescript
+import { ContainerComponent } from '@lucca-front/ng/container';
+```
+
+## Basic Usage
+
+```html
+<lu-container> <div class="fakeContent">container</div>
+</lu-container>
+<lu-container> <div class="fakeContent">container</div>
+</lu-container>
+<lu-container> <div class="fakeContent">container</div>
+</lu-container>
+```
+
+## API Reference
+
+### ContainerComponent (component)
+
+**Selector:** `lu-container`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `center` | `center` | `boolean` | `false` | — | `luBooleanAttribute` | Centre horizontalement le container. |
+| `overflow` | `overflow` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `max` | `max` | `ContainerSize \| null` | `null` | — | — | Définit la largeur maximale du container. |
+
+## Related files
+
+- 📝 [Code & implementation](./container.component.md)
+
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-container-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
+
+~ `center` : transform booleanAttribute → luBooleanAttribute
+~ `overflow` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `CONTAINER_SIZE` constant and `ContainerSize` type are now publicly exported and used to type the `max` input.
+
+#### 21.2.0
+
+##### Fixed
+
+- Default `display` no longer overrides the layout of the container's content.
+- `justify-content` is no longer forced by the container.
+
+#### 20.3.0
+
+##### Added
+
+- `lu-container` component (`container`) with the `center`, `max` and `overflow` inputs.
+
+#### 20.1.0
+
+##### Added
+
+- Container support inside `pageHeader` and `footer` to align their content with the page container.