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

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

@@ -0,0 +1,252 @@
+# button — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-actions-button-angular-ai--docs)
+
+## Angular
+
+Component selector : `luButton`
+
+### Ai
+
+```js
+import { ButtonComponent } from '@lucca-front/ng/button';
+import { IconComponent } from '@lucca-front/ng/icon';
+```
+
+```html
+<button type="button" luButton="AI">
+	<lu-icon icon="officePenStar" alt="Assistant IA" />
+	Reformuler
+</button>
+```
+
+### Basic
+
+La directive `luButton` peut être utilisée sur un élément `<button>`, tout comme sur un élément `<a>` si le style du bouton nécessite d'être appliqué sur ce dernier.
+
+```js
+import { ButtonComponent } from "@lucca-front/ng/button";
+```
+
+```html
+<button type="button" luButton>Button</button>
+```
+
+### Counter
+
+```js
+import { ButtonComponent } from "@lucca-front/ng/button";
+import { NumericBadgeComponent } from '@lucca-front/ng/numeric-badge';
+```
+
+```html
+<button type="button" luButton>
+	Button
+	<lu-numeric-badge disableTooltip [value]="9999" />
+</button>
+```
+
+### Icon
+
+```js
+import { ButtonComponent } from "@lucca-front/ng/button";
+import { IconComponent } from '@lucca-front/ng/icon';
+```
+
+```html
+<button type="button" luButton>
+	<lu-icon icon="signInfo" alt="Alt text" />
+	Button
+</button>
+```
+
+## HTML/CSS
+
+Classe CSS : `.button`
+
+### Attributs 
+
+Le `type` est obligatoire (`button`, `submit` ou `reset`)
+
+### Navigation clavier
+
+*Entrée* / *espace* (au focus) : Déclenche l'action liée.
+
+### Block
+
+```css
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<button type="button" class="button mod-block">Button</button>
+```
+
+### Counter
+
+```css
+@forward '@lucca-front/scss/src/components/button';
+@forward '@lucca-front/scss/src/components/numericBadge';
+```
+
+```html
+<button type="button" class="button">
+	Button
+	<span class="numericBadge">7</span>
+</button>
+<button type="button" class="button palette-warning">
+	Button
+	<span class="numericBadge">7</span>
+</button>
+<button type="button" class="button palette-mint">
+	Button
+	<span class="numericBadge">7</span>
+</button>
+```
+
+### Disabled
+
+```css
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<button type="button" class="button" disabled>Button</button>
+```
+
+### Disclosure
+
+```css
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<button type="button" class="button mod-disclosure">
+	Button
+	<span aria-hidden="true" class="lucca-icon icon-arrowChevronBottom"></span>
+</button>
+```
+
+### Group
+
+```css
+@forward '@lucca-front/scss/src/components/button';
+@forward '@lucca-front/scss/src/components/buttonGroup'; // Import suppémentaire
+```
+
+```html
+<ul class="button-group">
+	<li class="button-group-item"><button type="button" class="button">Bouton</button></li>
+	<li class="button-group-item"><button type="button" class="button">Bouton</button></li>
+	<li class="button-group-item"><button type="button" class="button">Bouton</button></li>
+	<li class="button-group-item">
+		<button type="button" class="button mod-more">
+			<span class="lucca-icon icon-arrowChevronBottom" aria-hidden="true"></span>
+			<span class="pr-u-mask">Plus d'actions</span>
+		</button>
+	</li>
+</ul>
+```
+
+### Only icon
+
+```css
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<button type="button" class="button mod-outlined mod-onlyIcon">
+	<span aria-hidden="true" class="lucca-icon icon-heart"></span>
+	<span class="pr-u-mask">Liker</span>
+</button>
+<button type="button" class="button mod-ghost mod-onlyIcon">
+	<span aria-hidden="true" class="lucca-icon icon-heart"></span>
+	<span class="pr-u-mask">Liker</span>
+</button>
+<button type="button" class="button mod-outlined mod-onlyIcon mod-critical">
+	<span aria-hidden="true" class="lucca-icon icon-trashDelete"></span>
+	<span class="pr-u-mask">Supprimer</span>
+</button>
+<button type="button" class="button mod-ghost mod-onlyIcon mod-critical">
+	<span aria-hidden="true" class="lucca-icon icon-trashDelete"></span>
+	<span class="pr-u-mask">Supprimer</span>
+</button>
+```
+
+### Palette
+
+```css
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<button type="button" class="button palette-success">Button</button>
+<button type="button" class="button palette-warning">Button</button>
+<button type="button" class="button palette-error">Button</button>
+```
+
+### Size
+
+```css
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<button type="button" class="button">Button</button>
+<button type="button" class="button mod-S">Button</button>
+<button type="button" class="button mod-XS">Button</button>
+```
+
+### States
+
+```css
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<div class="pr-u-displayFlex pr-u-gap100 pr-u-alignItemsCenter">
+	<button type="button" class="button is-loading" disabled="disabled">Button</button>
+	<button type="button" class="button is-success">Button</button>
+	<button type="button" class="button is-error">Button</button>
+</div>
+```
+
+### Style
+
+```css
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<button type="button" class="button">Button</button>
+<button type="button" class="button mod-outlined">Button</button>
+<button type="button" class="button mod-ghost">Button</button>
+<!-- 20.3 -->
+<button type="button" class="button mod-AI">Button</button>
+```
+
+### With arrow
+
+```css
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<button aria-expanded="false" type="button" class="button mod-disclosure">
+	Button
+	<span aria-hidden="true" class="lucca-icon icon-arrowChevronBottom"></span>
+</button>
+```
+
+### With icon
+
+```css
+@forward '@lucca-front/scss/src/components/button';
+```
+
+```html
+<button type="button" class="button mod-withIcon">
+	<span aria-hidden="true" class="lucca-icon icon-heart"></span>
+	Button
+</button>
+```

package/llms/references/components/button/button.md

@@ -0,0 +1,124 @@
+# button
+
+## Import
+
+```typescript
+import { ButtonComponent } from '@lucca-front/ng/button';
+```
+
+## Basic Usage
+
+```html
+<button type="button" luButton
+>Button</button>
+```
+
+## API Reference
+
+### ButtonComponent (component)
+
+**Selectors:** `button[luButton]`, `a[luButton]`, `span[luButton]`, `button[prButton]`, `a[prButton]`, `span[prButton]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `size` | `size` | `'M' \| 'S' \| 'XS'` | — | — | — | Modifie la taille du composant. |
+| `block` | `block` | `boolean, boolean \| `${boolean}` \| ''` | `false` | — | `booleanAttribute` | Applique display: block. |
+| `disabled` | `disabled` | `boolean, boolean \| `${boolean}` \| ''` | `false` | — | `booleanAttribute` | — |
+| `critical` | `critical` | `boolean, boolean \| `${boolean}` \| ''` | `false` | — | `booleanAttribute` | [v20.2] Marque une action aux conséquences importantes ou irréversibles au survol et focus. Seulement compatible avec ou… |
+| `delete` | `delete` | `boolean, boolean \| `${boolean}` \| ''` | `false` | — | `booleanAttribute` | ⚠️ **Déprécié** : use `critical` input instead [Deprecated] Remplacé par critical. |
+| `disclosure` | `disclosure` | `boolean, boolean \| `${boolean}` \| ''` | `false` | — | `booleanAttribute` | Indique la présence d’un menu. |
+| `palette` | `palette` | `'success' \| 'warning' \| 'error' \| 'product' \| 'neutral' \| 'none' \| 'brand'` | `'none'` | — | — | Applique une palette de couleurs au bouton. |
+| `state` | `state` | `'default' \| 'loading' \| 'error' \| 'success'` | `'default'` | — | — | Modifie l’état du bouton. |
+| `luButton` | `luButton` | `'' \| 'outlined' \| 'AI' \| 'AI-invert' \| 'ghost' \| 'ghost-invert' \| 'text' \| 'text-invert'` | `''` | — | — | Modifie la hierarchie ou le style du bouton.[v20.3] AI |
+| `prButton` | `prButton` | `'' \| 'outlined' \| 'AI' \| 'AI-invert' \| 'ghost' \| 'ghost-invert' \| 'text' \| 'text-invert'` | `''` | — | — | — |
+
+## Related files
+
+- 📝 [Code & implementation](./button.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/button/button.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/button/button.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-actions-button-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
+
+~ `block` : boolean → boolean, boolean | `${boolean}` | ''
+~ `disabled` : boolean → boolean, boolean | `${boolean}` | ''
+~ `critical` : boolean → boolean, boolean | `${boolean}` | ''
+~ `delete` : boolean → boolean, boolean | `${boolean}` | ''
+~ `disclosure` : boolean → boolean, boolean | `${boolean}` | ''
+~ `palette` : 'success' | 'warning' | 'error' | 'product' | 'neutral' | 'none' | 'primary' | 'grey' | 'brand' → 'success' | 'warning' | 'error' | 'product' | 'neutral' | 'none' | 'brand'
+
+### Notes de release (ZeroHeight)
+
+#### 21.2.0
+
+##### Added
+
+- `BUTTON_SIZE`, `BUTTON_STATE`, and `BUTTON_TYPE` TypeScript constants are now publicly exported.
+
+##### Fixed
+
+- `AI` button loading animation now renders correctly.
+- `disclosure` chevron rotation corrected when `[aria-expanded="true"]`.
+
+#### 20.3.0
+
+##### Added
+
+- `AI` button style (`luButton="AI"`) for AI-related actions, including the `AI-invert` variant for dark backgrounds.
+- Support for a dedicated `mod-AI` icon-only variant.
+
+#### 20.2.0
+
+##### Added
+
+- `critical` input to flag actions with significant or irreversible consequences (hover/focus only). Only compatible with `outlined` and `ghost` styles. For buttons that must always appear in red, keep using `palette="critical"`.
+- `state` input (`loading`, `error`, `success`) to reflect asynchronous action feedback. The `error` state triggers a shake animation.
+- `mod-iconOnLeft` and `mod-iconOnRight` CSS classes are now applied automatically based on icon position inside the button.
+
+##### Deprecated
+
+- `delete` input — use `critical` instead.
+- `.button.mod-text` class — use `luButton="ghost"`.
+- `.button.mod-deleted` class — use the `critical` input.
+- `.button.loading` class — use `state="loading"`.
+
+#### 20.1.0
+
+##### Added
+
+- `ghost-invert` and `text-invert` button types for use on dark backgrounds.
+
+#### 19.3.0
+
+##### Added
+
+- `disclosure` input to display a rotating chevron indicating an attached menu (`[aria-expanded]` driven).
+
+#### 19.1.0
+
+##### Removed
+
+- Deprecated `.button.mod-icon` combination (deprecated since `17.2.0`). Use `mod-onlyIcon` with `lu-icon` instead.
+
+#### 18.1.0
+
+##### Added
+
+- `delete` input to mark a button as destructive (applies `mod-delete`).
+
+##### Changed
+
+- `<button>` elements without an explicit `type` attribute now automatically receive `type="button"` to prevent accidental form submissions.
+
+#### 17.2.0
+
+##### Deprecated
+
+- `.button.mod-icon` CSS class combination in favour of `mod-onlyIcon`.