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

package/llms/references/components/scrollbox/scrollbox.md

@@ -0,0 +1,49 @@
+# scrollbox
+
+## Import
+
+```typescript
+import { ScrollBoxComponent } from '@lucca-front/ng/scroll-box';
+```
+
+## Basic Usage
+
+```html
+<lu-scroll-box> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div>
+</lu-scroll-box>
+<lu-scroll-box [attr.style]="'--components-scrollBox-paddingBlock: var(--pr-t-spacings-200); --components-scrollBox-paddingInline: 0rem; --components-scrollBox-marginBlock: 0rem'"> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div>
+</lu-scroll-box>
+<div class="resize"> <lu-scroll-box [attr.style]="'--components-scrollBox-marginBlock: var(--pr-t-spacings-300);--components-scrollBox-marginInline: 0; --components-scrollBox-paddingBlock: var(--pr-t-spacings-300); --components-scrollBox-gap: var(--pr-t-spacings-300);'"> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> </lu-scroll-box>
+</div>
+<lu-scroll-box> <div style="inline-size: 200vw" class="box">box</div>
+</lu-scroll-box>
+<lu-scroll-box> <div class="box">box</div>
+</lu-scroll-box>
+```
+
+## API Reference
+
+### ScrollBoxComponent (component)
+
+**Selector:** `lu-scroll-box`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `vertical` | `vertical` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+## Related files
+
+- 📝 [Code & implementation](./scrollbox.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/scrollbox/scrollbox.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/scrollbox/scrollbox.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-scrollbox--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
+
+~ `vertical` : transform booleanAttribute → luBooleanAttribute

package/llms/references/components/section-empty-state/section-empty-state.component.md

@@ -0,0 +1,9 @@
+# section-empty-state — Code & Implementation
+
+## Angular
+
+Component selector : `lu-empty-state-section`
+
+## HTML/CSS
+
+Classe CSS : `.emptyState`

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

@@ -0,0 +1,41 @@
+# section-empty-state
+
+## Import
+
+```typescript
+import { EmptyStateSectionComponent } from '@lucca-front/ng/empty-state';
+```
+
+## API Reference
+
+### EmptyStateSectionComponent (component)
+
+**Selector:** `lu-empty-state-section`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `icon` | `icon` | `string \| null` | `null` | — | — | ⚠️ **Déprécié** : use illustration and action  |
+| `illustration` | `illustration` | `BubbleIllustration \| string \| null` | `null` | — | — | — |
+| `action` | `action` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `palette` | `palette` | `Palette` | `'none'` | — | — | — |
+| `center` | `center` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `heading` | `heading` | `string` | — | — | — | — |
+| `description` | `description` | `PortalContent` | — | — | — | — |
+| `hx` | `hx` | `number` | `3` | — | `luNumberAttribute` | — |
+
+## Related files
+
+- 📝 [Code & implementation](./section-empty-state.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/section-empty-state/section-empty-state.design.md)
+
+## Changelog
+
+> Diff structurel de l'API (selectors, inputs, outputs, models) entre versions stables, depuis `v21.4.2` jusqu'à `v22.0.0`. Les versions sans changement d'API sont omises.
+
+### 22.0.0
+
+~ `action` : transform booleanAttribute → luBooleanAttribute
+~ `center` : transform booleanAttribute → luBooleanAttribute
+~ `hx` : transform numberAttribute → luNumberAttribute

package/llms/references/components/segmented-control-tabs/segmented-control-tabs.md

@@ -0,0 +1,50 @@
+# segmented-control-tabs
+
+## Import
+
+```typescript
+import { SegmentedControlTabsPanelComponent, SegmentedControlTabsComponent } from '@lucca-front/ng/segmented-control-tabs';
+```
+
+## API Reference
+
+### SegmentedControlTabsPanelComponent (component)
+
+**Selector:** `lu-segmented-control-tabs-panel`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `label` | `label` | `PortalContent` | — | — | — | — |
+| `value` | `value` | `T` | — | ✅ | — | — |
+
+### SegmentedControlTabsComponent (component)
+
+**Selector:** `lu-segmented-control-tabs`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `small` | `small` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `vertical` | `vertical` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+#### Models (two-way binding)
+
+| Property | Type | Required | Notes |
+|----------|------|----------|-------|
+| `active` | `T \| null` | — | — |
+
+## Related files
+
+## 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
+
+`SegmentedControlTabsComponent` :
+  ~ `small` : transform booleanAttribute → luBooleanAttribute
+  ~ `vertical` : transform booleanAttribute → luBooleanAttribute
+  ~ (model) `active` : T → T | null

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

@@ -0,0 +1,198 @@
+# segmentedcontrol — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-navigation-segmentedcontrol-angular-tabs--docs)
+
+## Angular
+
+Mots-clés : tabs, onglets
+
+Component selector : `lu-segmented-control`
+
+### Control tabs
+
+```js
+import { SegmentedControlTabsComponent, SegmentedControlTabsPanelComponent } from '@lucca-front/ng/segmentedControlTabs';
+```
+
+```html
+<ng-template #label>Lorem</ng-template>
+<lu-segmented-control-tabs>
+	<lu-segmented-control-tabs-panel [label]="label" value="0">
+		<div class="demo">Content Lorem</div>
+	</lu-segmented-control-tabs-panel>
+	<lu-segmented-control-tabs-panel label="Ipsum" value="1">
+		<div class="demo">Content Ipsum</div>
+	</lu-segmented-control-tabs-panel>
+	<lu-segmented-control-tabs-panel label="Dolor sit amet" value="2">
+		<div class="demo">Content Dolor sit amet</div>
+	</lu-segmented-control-tabs-panel>
+	<lu-segmented-control-tabs-panel label="Consectetur adipisicing elit" value="3">
+		<div class="demo">Content Consectetur adipisicing elit</div>
+	</lu-segmented-control-tabs-panel>
+</lu-segmented-control-tabs>
+```
+
+### Control
+
+```js
+import { SegmentedControlComponent, SegmentedControlFilterComponent } from '@lucca-front/ng/segmented-control';
+```
+
+```html
+<ng-template #label>Lorem</ng-template>
+<lu-segmented-control [(ngModel)]="sample">
+	<lu-segmented-control-filter [label]="label" value="0" />
+	<lu-segmented-control-filter label="Ipsum" value="1" />
+	<lu-segmented-control-filter label="Dolor sit amet" value="2" />
+	<lu-segmented-control-filter label="Consectetur adipisicing elit" value="3" />
+</lu-segmented-control>
+<pr-story-model-display>{{ sample }}</pr-story-model-display>
+```
+
+## HTML/CSS
+
+Classe CSS : `.segmentedControl`
+
+Ce composant répond à deux *design pattern* : onglets et filtres.
+
+### Onglets
+
+Les onglets s’appliquent à des données différentes, dont une seule est affichée à la fois.
+
+### Control filter
+
+Les filtres s’appliquent à un même jeu de données. Ce sont des options de formulaire.
+
+```css
+@forward '@lucca-front/scss/src/components/segmentedControl';
+```
+
+```html
+<ul class="segmentedControl" role="presentation">
+	<li class="segmentedControl-item">
+		<input type="radio" class="segmentedControl-item-input" name="tab" id="tab1" checked="checked" />
+		<label for="tab1" class="segmentedControl-item-action">Lorem</label>
+	</li>
+	<li class="segmentedControl-item">
+		<input type="radio" class="segmentedControl-item-input" name="tab" id="tab2" />
+		<label for="tab2" class="segmentedControl-item-action">Ipsum</label>
+	</li>
+	<li class="segmentedControl-item">
+		<input type="radio" class="segmentedControl-item-input" name="tab" id="tab3" />
+		<label for="tab3" class="segmentedControl-item-action">Dolor sit amet</label>
+	</li>
+	<li class="segmentedControl-item">
+		<input type="radio" class="segmentedControl-item-input" name="tab" id="tab4" />
+		<label for="tab4" class="segmentedControl-item-action">Consectetur adipisicing elit</label>
+	</li>
+</ul>
+```
+
+### Control tabs
+
+```css
+@forward '@lucca-front/scss/src/components/segmentedControl';
+```
+
+```html
+<ul class="segmentedControl" role="tablist">
+	<li class="segmentedControl-item" role="presentation">
+		<button
+			class="segmentedControl-item-action"
+			type="button"
+			role="tab"
+			id="tab1"
+			aria-controls="panel1"
+			[attr.aria-selected]="tabActive === 1"
+			[attr.tabindex]="tabActive === 1 ? null : '-1'"
+		>
+			Lorem
+		</button>
+	</li>
+	<li class="segmentedControl-item" role="presentation">
+		<button
+			class="segmentedControl-item-action"
+			type="button"
+			role="tab"
+			id="tab2"
+			aria-controls="panel2"
+			[attr.aria-selected]="tabActive === 2"
+			[attr.tabindex]="tabActive === 2 ? null : '-1'"
+		>
+			Ipsum
+		</button>
+	</li>
+	<li class="segmentedControl-item" role="presentation">
+		<button
+			class="segmentedControl-item-action"
+			type="button"
+			role="tab"
+			id="tab3"
+			aria-controls="panel3"
+			[attr.aria-selected]="tabActive === 3"
+			[attr.tabindex]="tabActive === 3 ? null : '-1'"
+		>
+			Dolor sit amet
+		</button>
+	</li>
+	<li class="segmentedControl-item" role="presentation">
+		<button
+			class="segmentedControl-item-action"
+			type="button"
+			role="tab"
+			id="tab4"
+			aria-controls="panel4"
+			[attr.aria-selected]="tabActive === 4"
+			[attr.tabindex]="tabActive === 4 ? null : '-1'"
+		>
+			Consectetur adipisicing elit
+		</button>
+	</li>
+</ul>
+<div class="pr-u-marginBlockStart200"></div>
+<div
+	class="segmentedControl_panel"
+	[class.is-active]="tabActive === 1"
+	role="tabpanel"
+	id="panel1"
+	aria-labelledby="tab1"
+	tabindex="0"
+>
+	Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, maxime animi perferendis explicabo est eaque ipsa rem,
+	sit quasi sunt corporis iure distinctio. Deleniti deserunt aspernatur est placeat, assumenda provident.
+</div>
+<div
+	class="segmentedControl_panel"
+	[class.is-active]="tabActive === 2"
+	role="tabpanel"
+	id="panel2"
+	aria-labelledby="tab2"
+	tabindex="0"
+>
+	Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, cumque ad inventore maiores possimus in commodi
+	ea soluta maxime fugiat libero ducimus provident incidunt sit quod! Cum dolorem tempora sit?
+</div>
+<div
+	class="segmentedControl_panel"
+	[class.is-active]="tabActive === 3"
+	role="tabpanel"
+	id="panel3"
+	aria-labelledby="tab3"
+	tabindex="0"
+>
+	Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita optio voluptates distinctio nam facere consequatur
+	magni suscipit dolore earum molestiae esse placeat commodi, voluptas atque. Maxime, molestiae. Doloremque,
+	reprehenderit numquam.
+</div>
+<div
+	class="segmentedControl_panel"
+	[class.is-active]="tabActive === 4"
+	role="tabpanel"
+	id="panel4"
+	aria-labelledby="tab4"
+	tabindex="0"
+>
+	Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias amet placeat deserunt nisi. Vitae delectus animi a
+	voluptate, nisi voluptatum perspiciatis? Quisquam quam, eius molestiae vitae nesciunt iste est non.
+</div>
+```

package/llms/references/components/segmentedcontrol/segmentedcontrol.md

@@ -0,0 +1,108 @@
+# segmentedcontrol
+
+## Import
+
+```typescript
+import { SegmentedControlFilterComponent, SegmentedControlComponent } from '@lucca-front/ng/segmented-control';
+```
+
+## API Reference
+
+### SegmentedControlFilterComponent (component)
+
+**Selector:** `lu-segmented-control-filter`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `disabled` | `disabled` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `value` | `value` | `T` | — | ✅ | — | — |
+| `label` | `label` | `PortalContent` | — | — | — | — |
+
+### SegmentedControlComponent (component)
+
+**Selector:** `lu-segmented-control`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `small` | `small` | `boolean` | `false` | — | `luBooleanAttribute` | Modifie la taille du composant. |
+| `vertical` | `vertical` | `boolean` | `false` | — | `luBooleanAttribute` | Affiche le composant en vue verticale. |
+
+## Related files
+
+- 📝 [Code & implementation](./segmentedcontrol.component.md)
+
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/segmentedcontrol/segmentedcontrol.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-navigation-segmentedcontrol-angular-tabs--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
+
+`SegmentedControlFilterComponent` :
+  ~ `disabled` : transform booleanAttribute → luBooleanAttribute
+`SegmentedControlComponent` :
+  ~ `small` : transform booleanAttribute → luBooleanAttribute
+  ~ `vertical` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `lu-segmented-control-tabs` now supports `Home` and `End` keys to move focus and selection to the first and last tab.
+
+#### 21.2.2
+
+##### Added
+
+- `palette` support: selected, hover and active states now read `--palettes-*` CSS variables (falling back to the product palette) so the component can inherit a surrounding palette.
+
+#### 20.3.0
+
+##### Added
+
+- `lu-segmented-control` Angular wrapper (`SegmentedControlComponent`), a `ControlValueAccessor` with `small` and `vertical` boolean inputs.
+- `lu-segmented-control-filter` (`SegmentedControlFilterComponent`) with `value` (required), `label` and `disabled` inputs.
+- `lu-segmented-control-tabs` (`SegmentedControlTabsComponent`) with `small` and `vertical` inputs, an `active` two-way model, and arrow-key navigation.
+- `lu-segmented-control-tabs-panel` (`SegmentedControlTabsPanelComponent`) with `value` (required) and `label` inputs.
+
+#### 20.1.2
+
+##### Added
+
+- `disabled` visual state for segmented control items.
+
+##### Fixed
+
+- Selected item `numericBadge` value no longer disappears when the item is not loading (loading styles now only apply to `is-loading` items).
+
+#### 20.1.1
+
+##### Fixed
+
+- `numericBadge` loading state color specificity inside selected items.
+
+#### 19.2.0
+
+##### Changed
+
+- Hover and active states restyled to use a raised shadow instead of a background pseudo-element; added `wrap` and `whiteSpace` CSS variables.
+
+#### 18.2.3
+
+##### Fixed
+
+- Hover and focus background rendering of segmented control items.
+
+#### 18.2.1
+
+##### Added
+
+- `segmentedControl` HTML/CSS component (`.segmentedControl`), with semantic and vertical variants.