@ouestfrance/sipa-bms-ui 8.20.0 → 8.22.0

package/src/documentation/icons.mdx

@@ -31,3 +31,46 @@ import { ChefHat } from 'lucide-vue-next'
   <h2> <ChefHat /> My recipes </h2>
 </template>
 ```
+
+## Recommendation
+
+## 1️⃣ Keep the Visual Style as Simple as Possible
+
+| Rule                                                                                                                         | Why it matters                                                   | Example                                                      |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------ |
+| **Pick the simplest icon** – a clean outline without extra adornments.                                                       | Reduces cognitive load and improves legibility on small screens. | “Edit” → `Pencil` instead of `PencilPlus`.                   |
+| **Limit variants** – use a single style (outline, filled, or two‑tone) for a given concept.                                  | Prevents confusion caused by multiple looks for the same action. | “Delete” → always `Trash` (outline).                         |
+| **Maintain consistent sizing** – stick to either 16 px or 24 px depending on context, never arbitrary sizes.                 | Guarantees uniform alignment across components.                  | Action buttons → 24 px; list items → 16 px.                  |
+| **Avoid icon + text combos** unless the text adds essential information (e.g., “Export PDF”).                                | The icon alone should convey the meaning.                        | “Download” → just the `Download` icon.                       |
+| **Ensure sufficient contrast** – use the accent colour or black/white based on background, meeting a ≥ 4.5:1 contrast ratio. | Makes the UI accessible for colour‑blind or low‑vision users.    | Dark background → white icon; light background → black icon. |
+
+## 3️⃣ Recommended Icon‑to‑Action Mapping
+
+| Action                 | Recommended Lucide Icon                       | Variant (outline / fill)             | Suggested Size                | Usage Note                                                    |
+| ---------------------- | --------------------------------------------- | ------------------------------------ | ----------------------------- | ------------------------------------------------------------- |
+| **Edit**               | `Pencil`                                      | Outline                              | 24 px (button) / 16 px (list) | Used to modify an existing item.                              |
+| **Delete**             | `Trash`                                       | Outline                              | 24 px (button) / 16 px (list) | Always paired with a confirmation modal.                      |
+| **Confirm / Save**     | `Check`                                       | Fill (to indicate an “active” state) | 24 px                         | Can replace the word “Save” on primary action bars.           |
+| **Cancel / Close**     | `X` _(alias `Close`)_                         | Outline                              | 24 px                         | Closes dialogs or cancels an operation.                       |
+| **Add / Create**       | `Plus`                                        | Outline                              | 24 px                         | Prefer the plain `Plus` over `PlusCircle` for minimalism.     |
+| **Download**           | `Download`                                    | Outline                              | 24 px                         | Placed next to a file‑download link.                          |
+| **Export**             | `Upload` _(or `Share2` depending on context)_ | Outline                              | 24 px                         | Use `Upload` for exporting data, `Share2` for sharing a link. |
+| **Search**             | `Search`                                      | Outline                              | 24 px                         | Visible even when the input field is empty.                   |
+| **Filter**             | `Filter`                                      | Outline                              | 24 px                         | Appears beside a “Filter” button.                             |
+| **Preview**            | `Eye`                                         | Outline                              | 24 px                         | Lets users preview content without editing.                   |
+| **Expand / Collapse**  | `ChevronDown` / `ChevronUp`                   | Outline                              | 16 px (inside lists)          | Indicates accordion or dropdown state.                        |
+| **Open External Link** | `ExternalLink`                                | Outline                              | 16 px                         | Shows next to a link that opens a new tab/window.             |
+
+> **Tip:** If you ever need an icon that Lucide doesn’t provide, create one that follows the same visual language (2 px stroke, rounded corners, no fill) to stay consistent with the rest of the set.
+
+---
+
+### 📌 Quick Checklist
+
+1. **Choose the simplest outline icon** for the action.
+2. **Standardise size & stroke width** (`16 px` or `24 px`, `strokeWidth={2}`).
+3. **Respect colour contrast** (dark icon on light background, light icon on dark background).
+4. **Import icons centrally** and re‑export them.
+5. **Add visual regression tests** for every icon used in the UI.
+
+Following these guidelines will keep the UI clean, professional, and accessible while leveraging the full power of the Lucide icon library. 🎨🚀

package/src/index.ts

@@ -7,6 +7,7 @@ import BmsAlert from './components/feedback/BmsAlert.vue';
 import BmsBadge from './components/feedback/BmsBadge.vue';
 import BmsCaption from './components/feedback/BmsCaption.vue';
 import BmsCircularProgress from './components/feedback/BmsCircularProgress.vue';
+import BmsGhost from '@/components/feedback/BmsGhost.vue';
 import BmsLoader from './components/feedback/BmsLoader.vue';
 import BmsTooltip from './components/feedback/BmsTooltip.vue';
 
@@ -79,6 +80,7 @@ export const createBmsUi = () => ({
     app.component('BmsBadge', BmsBadge);
     app.component('BmsCaption', BmsCaption);
     app.component('BmsCircularProgress', BmsCircularProgress);
+    app.component('BmsGhost', BmsGhost);
     app.component('BmsLoader', BmsLoader);
     app.component('BmsTooltip', BmsTooltip);
 
@@ -161,6 +163,7 @@ export {
   BmsBadge,
   BmsCaption,
   BmsCircularProgress,
+  BmsGhost,
   BmsLoader,
   BmsTooltip,
   BmsAutocomplete,

package/src/showroom/pages/forms.vue

@@ -240,6 +240,7 @@
     <BmsSelect
       label="select"
       required
+      @select="console.log('BmsSelect - select', $event)"
       v-model="selected"
       placeholder="This is a placeholder"
       :options="[{ label: 'value1', value: 'value1' }]"
@@ -262,6 +263,8 @@
       required
       placeholder="This is a placeholder"
       v-model="multiSelect"
+      @select="console.log('BmsMultiSelect - select', $event)"
+      @input="console.log('BmsMultiSelect - input', $event)"
       :options="[
         { label: 'toto1', value: 'value1', icon: BellIcon },
         { label: 'titi2', value: 'value2', icon: Magnet },
@@ -291,7 +294,13 @@
       placeholder="This is a placeholder"
       required
       v-model="auto"
-      :options="[{ label: 'value1', value: '1' }]"
+      @select="console.log('BmsAutocomplete - select', $event)"
+      @input="console.log('BmsAutocomplete - input', $event)"
+      :options="[
+        { label: 'value1', value: '1' },
+        { label: 'value2', value: '2' },
+        { label: 'value3', value: '3' },
+      ]"
     />
     <BmsInputNumber label="Chiffre" v-model="nbr" :min="5" :max="15" />
 

package/src/assets/scss/_formkit.scss

@@ -1,353 +0,0 @@
-@mixin formkit {
-  :root body {
-    /* theme name */
-    --formkit-theme: genesis;
-
-    /* typography */
-    --fk-font-family: var(--bms-font-family);
-    --fk-font-family-input: var(--fk-font-family);
-    --fk-font-family-label: var(--fk-font-family);
-    --fk-font-family-legend: var(--fk-font-family-label);
-    --fk-font-family-option: var(--fk-font-family-input);
-    --fk-font-family-help: var(--fk-font-family);
-    --fk-font-family-message: var(--fk-font-family);
-
-    --fk-font-weight: 400;
-    --fk-font-weight-input: var(--fk-font-weight);
-    --fk-font-weight-label: 700;
-    --fk-font-weight-legend: var(--fk-font-weight-label, bold);
-    --fk-font-weight-help: var(--fk-font-weight);
-    --fk-font-weight-option: var(--fk-font-weight);
-    --fk-font-weight-message: var(--fk-font-weight);
-
-    --fk-line-height: 1.1;
-    --fk-line-height-label: var(--fk-line-height);
-    --fk-line-height-help: var(--fk-line-height);
-    --fk-line-height-option: var(--fk-line-height);
-    --fk-line-height-message: var(--fk-line-height);
-    --fk-line-height-textarea: var(--fk-line-height);
-    --fk-line-height-input: 1.125em; /* Important to ensure equal height inputs. */
-    --fk-line-height-button: 1.3;
-
-    /* Structure */
-    --fk-max-width-input: 48em;
-    --fk-box-size: 0.875em;
-
-    /* Colors */
-    --fk-color-primary: var(--bms-main-100);
-    --fk-color-checked: var(--fk-color-primary);
-    --fk-color-input: var(--bms-font-color);
-    --fk-color-border: var(--bms-grey-50);
-    --fk-color-border-focus: var(--fk-color-primary);
-    --fk-color-border-shadow: var(--bms-main-10);
-    --fk-color-danger: var(--bms-red-100);
-    --fk-color-error: var(--fk-color-danger);
-    --fk-color-placeholder: var(--bms-grey-100);
-    --fk-color-disabled: var(--bms-disabled-color);
-    --fk-color-help: var(--bms-grey-100);
-    /* --fk-color-message: inherit; */
-    --fk-color-icon: var(--bms-grey-100);
-    --fk-color-icon-minor: var(--bms-grey-100);
-    --fk-color-button: #fff;
-    --fk-color-button-hover: #fff;
-    --fk-color-submit: var(--fk-color-button);
-    --fk-color-submit-hover: var(--fk-color-button-hover);
-    --fk-color-range-track: var(--fk-color-border);
-    --fk-color-range-thumb: var(--fk-color-primary);
-
-    --fk-bg-input: transparent;
-    --fk-bg-disabled: var(--bms-disabled-color);
-    --fk-bg-decorator: transparent;
-
-    --fk-bg-button: var(--fk-color-primary);
-    --fk-bg-button-hover: var(--fk-bg-button);
-    --fk-bg-submit: var(--fk-bg-button);
-    --fk-bg-submit-hover: var(--fk-bg-submit);
-
-    /* Borders */
-    --fk-border-width: 1px;
-    --fk-border-width-decorator: var(--fk-border-width);
-    --fk-border-width-focus: 1px;
-    --fk-border-width-checked: 1px;
-    --fk-border-width-decorator-checked: 1px;
-    --fk-border-width-decorator-focus: var(--fk-border-width-decorator-checked);
-    --fk-border-width-decorator-focus-visible: var(--fk-border-width-focus);
-    --fk-border-style: solid;
-    --fk-border: var(--fk-border-width) var(--fk-border-style)
-      var(--fk-color-border);
-    --fk-border-focus: var(--fk-border-width-focus) var(--fk-border-style)
-      var(--fk-color-border-focus);
-    --fk-border-decorator: var(--fk-border-width-decorator)
-      var(--fk-border-style) var(--fk-color-border);
-    --fk-border-decorator-focus: var(--fk-border-width-focus)
-      var(--fk-border-style) var(--fk-color-border-focus);
-    --fk-border-decorator-focus-visible: var(
-        --fk-border-width-decorator-focus-visible
-      )
-      var(--fk-border-style) var(--fk-color-border-focus);
-    --fk-border-decorator-checked: var(--fk-border-width-checked)
-      var(--fk-border-style) var(--fk-color-border-focus);
-    --fk-border-box-shadow: 0 0 0 var(--fk-border-width) var(--fk-color-border);
-    --fk-border-box-shadow-focus: 0 0 0 var(--fk-border-width-focus)
-        var(--fk-color-border-focus),
-      0 0 2px 2px var(--fk-color-border-shadow);
-    --fk-border-box-shadow-decorator: 0 0 0 var(--fk-border-width-decorator);
-    --fk-border-box-shadow-decorator-focus: 0 0 0
-      var(--fk-border-width-decorator-focus) var(--fk-color-border-focus);
-    --fk-border-box-shadow-decorator-focus-visible: 0 0 0
-      var(--fk-border-width-decorator-focus-visible)
-      var(--fk-color-border-focus);
-    --fk-border-box-shadow-decorator-checked: 0 0 0
-      var(--fk-border-width-decorator-checked) var(--fk-color-border-focus);
-    --fk-border-radius-tl: 4px;
-    --fk-border-radius-tr: 4px;
-    --fk-border-radius-bl: 4px;
-    --fk-border-radius-br: 4px;
-    --fk-border-radius: var(--fk-border-radius-tl, 4px)
-      var(--fk-border-radius-tr, 4px) var(--fk-border-radius-br, 4px)
-      var(--fk-border-radius-bl, 4px);
-    --fk-border-radius-full: 999em;
-
-    /* Padding */
-    --fk-padding-base: calc(0.25em - 1px / 3);
-
-    --fk-padding-input-x: calc(var(--fk-padding-base) * 3);
-    --fk-padding-input-y: calc(var(--fk-padding-base) * 3);
-    --fk-padding-input-t: var(--fk-padding-input-y, 0);
-    --fk-padding-input-r: var(--fk-padding-input-x, 0);
-    --fk-padding-input-b: var(--fk-padding-input-y, 0);
-    --fk-padding-input-l: var(--fk-padding-input-x, 0);
-    --fk-padding-input: var(--fk-padding-input-t) var(--fk-padding-input-r)
-      var(--fk-padding-input-b) var(--fk-padding-input-l);
-
-    --fk-padding-label-x: inherit;
-    --fk-padding-label-y: inherit;
-    --fk-padding-label-t: var(--fk-padding-label-y, 0);
-    --fk-padding-label-r: var(--fk-padding-label-x, 0);
-    --fk-padding-label-b: var(--fk-padding-label-y, 0.5em);
-    --fk-padding-label-l: var(--fk-padding-label-x, 0);
-    --fk-padding-label: var(--fk-padding-label-t) var(--fk-padding-label-r)
-      var(--fk-padding-label-b) var(--fk-padding-label-l);
-
-    --fk-padding-help-x: inherit;
-    --fk-padding-help-y: var(--fk-padding-base);
-    --fk-padding-help-t: var(--fk-padding-help-y, 0);
-    --fk-padding-help-r: var(--fk-padding-help-x, 0);
-    --fk-padding-help-b: var(--fk-padding-help-y, 0);
-    --fk-padding-help-l: var(--fk-padding-help-x, 0);
-    --fk-padding-help: var(--fk-padding-help-t) var(--fk-padding-help-r)
-      var(--fk-padding-help-b) var(--fk-padding-help-l);
-
-    --fk-padding-option-x: inherit;
-    --fk-padding-option-y: inherit;
-    --fk-padding-option-t: var(--fk-padding-option-y, 0);
-    --fk-padding-option-r: var(--fk-padding-option-x, 0);
-    --fk-padding-option-b: var(--fk-padding-option-y, 0);
-    --fk-padding-option-l: var(--fk-padding-option-x, 0);
-    --fk-padding-option: var(--fk-padding-option-t) var(--fk-padding-option-r)
-      var(--fk-padding-option-b) var(--fk-padding-option-l);
-
-    --fk-padding-messages-x: inherit;
-    --fk-padding-messages-y: inherit;
-    --fk-padding-messages-t: var(
-      --fk-padding-messages-y,
-      var(--fk-padding-base)
-    );
-    --fk-padding-messages-r: var(--fk-padding-messages-x, 0);
-    --fk-padding-messages-b: var(--fk-padding-messages-y, 0);
-    --fk-padding-messages-l: var(--fk-padding-messages-x, 0);
-    --fk-padding-messages: var(--fk-padding-messages-t)
-      var(--fk-padding-messages-r) var(--fk-padding-messages-b)
-      var(--fk-padding-messages-l);
-
-    --fk-padding-message-x: inherit;
-    --fk-padding-message-y: var(--fk-padding-base);
-    --fk-padding-message-t: var(--fk-padding-message-y, 0);
-    --fk-padding-message-r: var(--fk-padding-message-x, 0);
-    --fk-padding-message-b: var(--fk-padding-message-y, 0);
-    --fk-padding-message-l: var(--fk-padding-message-x, 0);
-    --fk-padding-message: var(--fk-padding-message-t)
-      var(--fk-padding-message-r) var(--fk-padding-message-b)
-      var(--fk-padding-message-l);
-
-    --fk-padding-legend-x: 0.25em;
-    --fk-padding-legend-y: 0.25em;
-    --fk-padding-legend-t: var(--fk-padding-legend-y);
-    --fk-padding-legend-r: var(--fk-padding-legend-x);
-    --fk-padding-legend-b: var(--fk-padding-legend-y);
-    --fk-padding-legend-l: var(--fk-padding-legend-x);
-    --fk-padding-legend: var(--fk-padding-legend-t) var(--fk-padding-legend-r)
-      var(--fk-padding-legend-b) var(--fk-padding-legend-l);
-
-    --fk-padding-fieldset-x: var(--fk-padding-input-x);
-    --fk-padding-fieldset-y: var(--fk-padding-input-y);
-    --fk-padding-fieldset-t: var(--fk-padding-fieldset-y);
-    --fk-padding-fieldset-r: var(--fk-padding-fieldset-x);
-    --fk-padding-fieldset-b: var(--fk-padding-fieldset-y);
-    --fk-padding-fieldset-l: var(--fk-padding-fieldset-x);
-    --fk-padding-fieldset: var(--fk-padding-fieldset-t)
-      var(--fk-padding-fieldset-r) var(--fk-padding-fieldset-b)
-      var(--fk-padding-fieldset-l);
-
-    --fk-padding-decorator-x: inherit;
-    --fk-padding-decorator-y: var(--fk-padding-base);
-    --fk-padding-decorator-t: var(--fk-padding-decorator-y, 1.25em);
-    --fk-padding-decorator-r: var(--fk-padding-decorator-x, 1.25em);
-    --fk-padding-decorator-b: var(--fk-padding-decorator-y, 1.25em);
-    --fk-padding-decorator-l: var(--fk-padding-decorator-x, 1.25em);
-    --fk-padding-decorator: var(--fk-padding-decorator-t)
-      var(--fk-padding-decorator-r) var(--fk-padding-decorator-b)
-      var(--fk-padding-decorator-l);
-
-    --fk-padding-button-x: calc(var(--fk-padding-base) * 8);
-    --fk-padding-button-y: calc(var(--fk-padding-base) * 3);
-    --fk-padding-button-t: var(--fk-padding-button-y);
-    --fk-padding-button-r: var(--fk-padding-button-x);
-    --fk-padding-button-b: var(--fk-padding-button-y);
-    --fk-padding-button-l: var(--fk-padding-button-x);
-    --fk-padding-button: var(--fk-padding-button-t) var(--fk-padding-button-r)
-      var(--fk-padding-button-b) var(--fk-padding-button-l);
-
-    /* Margin */
-    --fk-margin-base: 0.5em;
-
-    --fk-margin-outer-x: inherit;
-    --fk-margin-outer-y: inherit;
-    --fk-margin-outer-t: var(--fk-margin-outer-y, 0);
-    --fk-margin-outer-r: var(--fk-margin-outer-x, 0);
-    --fk-margin-outer-b: var(
-      --fk-margin-outer-y,
-      calc(var(--fk-margin-base) * 2)
-    );
-    --fk-margin-outer-l: var(--fk-margin-outer-x, 0);
-    --fk-margin-outer: var(--fk-margin-outer-t) var(--fk-margin-outer-r)
-      var(--fk-margin-outer-b) var(--fk-margin-outer-l);
-
-    --fk-margin-wrapper-x: inherit;
-    --fk-margin-wrapper-y: inherit;
-    --fk-margin-wrapper-t: var(--fk-margin-wrapper-y, 0);
-    --fk-margin-wrapper-r: var(--fk-margin-wrapper-x, 0);
-    --fk-margin-wrapper-b: var(--fk-margin-wrapper-y, 0);
-    --fk-margin-wrapper-l: var(--fk-margin-wrapper-x, 0);
-    --fk-margin-wrapper: var(--fk-margin-wrapper-t) var(--fk-margin-wrapper-r)
-      var(--fk-margin-wrapper-b) var(--fk-margin-wrapper-l);
-
-    --fk-margin-input-x: inherit;
-    --fk-margin-input-y: inherit;
-    --fk-margin-input-t: var(--fk-margin-input-y, 0);
-    --fk-margin-input-r: var(--fk-margin-input-x, 0);
-    --fk-margin-input-b: var(--fk-margin-input-y, 0);
-    --fk-margin-input-l: var(--fk-margin-input-x, 0);
-    --fk-margin-input: var(--fk-margin-input-t) var(--fk-margin-input-r)
-      var(--fk-margin-input-b) var(--fk-margin-input-l);
-
-    --fk-margin-label-x: inherit;
-    --fk-margin-label-y: 0;
-    --fk-margin-label-t: var(--fk-margin-label-y, 0);
-    --fk-margin-label-r: var(--fk-margin-label-x, 0);
-    --fk-margin-label-b: var(--fk-margin-label-y, var(--fk-margin-base));
-    --fk-margin-label-l: var(--fk-margin-label-x, 0);
-    --fk-margin-label: var(--fk-margin-label-t) var(--fk-margin-label-r)
-      var(--fk-margin-label-b) var(--fk-margin-label-l);
-
-    --fk-margin-help-x: inherit;
-    --fk-margin-help-y: 0.3em;
-    --fk-margin-help-t: var(--fk-margin-help-y, 0);
-    --fk-margin-help-r: var(--fk-margin-help-x, 0);
-    --fk-margin-help-b: 0;
-    --fk-margin-help-l: var(--fk-margin-help-x, 0);
-    --fk-margin-help: var(--fk-margin-help-t) var(--fk-margin-help-r)
-      var(--fk-margin-help-b) var(--fk-margin-help-l);
-
-    --fk-margin-option-x: inherit;
-    --fk-margin-option-y: inherit;
-    --fk-margin-option-t: var(--fk-margin-option-y, 0);
-    --fk-margin-option-r: var(--fk-margin-option-x, 0);
-    --fk-margin-option-b: var(--fk-margin-option-y, 0.625em);
-    --fk-margin-option-l: var(--fk-margin-option-x, 0);
-    --fk-margin-option: var(--fk-margin-option-t) var(--fk-margin-option-r)
-      var(--fk-margin-option-b) var(--fk-margin-option-l);
-
-    --fk-margin-message-x: inherit;
-    --fk-margin-message-y: inherit;
-    --fk-margin-message-t: var(--fk-margin-message-y, 0);
-    --fk-margin-message-r: var(--fk-margin-message-x, 0);
-    --fk-margin-message-b: var(--fk-margin-message-y, 0);
-    --fk-margin-message-l: var(--fk-margin-message-x, 0);
-    --fk-margin-message: var(--fk-margin-message-t) var(--fk-margin-message-r)
-      var(--fk-margin-message-b) var(--fk-margin-message-l);
-
-    --fk-margin-legend-x: 0em;
-    --fk-margin-legend-y: inherit;
-    --fk-margin-legend-t: var(--fk-margin-legend-y, 0);
-    --fk-margin-legend-r: var(--fk-margin-legend-x, 0);
-    --fk-margin-legend-b: var(--fk-margin-legend-y, 0);
-    --fk-margin-legend-l: var(--fk-margin-legend-x, 0);
-    --fk-margin-legend: var(--fk-margin-legend-t) var(--fk-margin-legend-r)
-      var(--fk-margin-legend-b) var(--fk-margin-legend-l);
-
-    --fk-margin-fieldset-x: inherit;
-    --fk-margin-fieldset-y: inherit;
-    --fk-margin-fieldset-t: var(--fk-margin-fieldset-y, 0);
-    --fk-margin-fieldset-r: var(--fk-margin-fieldset-x, 0);
-    --fk-margin-fieldset-b: var(--fk-margin-fieldset-y, 0);
-    --fk-margin-fieldset-l: var(--fk-margin-fieldset-x, 0);
-    --fk-margin-fieldset: var(--fk-margin-fieldset-t)
-      var(--fk-margin-fieldset-r) var(--fk-margin-fieldset-b)
-      var(--fk-margin-fieldset-l);
-
-    --fk-margin-decorator-x: inherit;
-    --fk-margin-decorator-y: inherit;
-    --fk-margin-decorator-t: var(--fk-margin-decorator-y, 0);
-    --fk-margin-decorator-r: var(--fk-margin-decorator-x, 0.5em);
-    --fk-margin-decorator-b: var(--fk-margin-decorator-y, 0);
-    --fk-margin-decorator-l: var(--fk-margin-decorator-x, 0);
-    --fk-margin-decorator: var(--fk-margin-decorator-t)
-      var(--fk-margin-decorator-r) var(--fk-margin-decorator-b)
-      var(--fk-margin-decorator-l);
-
-    --fk-margin-button-x: inherit;
-    --fk-margin-button-y: inherit;
-    --fk-margin-button-t: var(--fk-margin-button-y, 0);
-    --fk-margin-button-r: var(--fk-margin-button-x, 0.5em);
-    --fk-margin-button-b: var(--fk-margin-button-y, 0);
-    --fk-margin-button-l: var(--fk-margin-button-x, 0);
-    --fk-margin-button: var(--fk-margin-button-t) var(--fk-margin-button-r)
-      var(--fk-margin-button-b) var(--fk-margin-button-l);
-
-    /* default icons */
-    --fk-icon-close: PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxsaW5lIHgxPSIxOCIgeTE9IjYiIHgyPSI2IiB5Mj0iMTgiPjwvbGluZT4KICA8bGluZSB4MT0iNiIgeTE9IjYiIHgyPSIxOCIgeTI9IjE4Ij48L2xpbmU +
-      Cjwvc3ZnPg==;
-    --fk-icon-down: PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxwb2x5bGluZSBwb2ludHM9IjYgOSAxMiAxNSAxOCA5Ij48L3BvbHlsaW5lPgo8L3N2Zz4=;
-    --fk-icon-fileDoc: PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxwYXRoIGQ9Ik0xNC41IDJINmEyIDIgMCAwIDAtMiAydjE2YTIgMiAwIDAgMCAyIDJoMTJhMiAyIDAgMCAwIDItMlY3LjVMMTQuNSAyeiI +
-      PC9wYXRoPgogIDxwb2x5bGluZSBwb2ludHM9IjE0IDIgMTQgOCAyMCA4Ij48L3BvbHlsaW5lPgogIDxsaW5lIHgxPSIxNiIgeTE9IjEzIiB4Mj0iOCIgeTI9IjEzIj48L2xpbmU +
-      CiAgPGxpbmUgeDE9IjE2IiB5MT0iMTciIHgyPSI4IiB5Mj0iMTciPjwvbGluZT4KICA8bGluZSB4MT0iMTAiIHkxPSI5IiB4Mj0iOCIgeTI9IjkiPjwvbGluZT4KPC9zdmc +;
-    --fk-icon-check: PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxwb2x5bGluZSBwb2ludHM9IjIwIDYgOSAxNyA0IDEyIj48L3BvbHlsaW5lPgo8L3N2Zz4=;
-    --fk-icon-circle: PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI +
-      PGNpcmNsZSBmaWxsPSJjdXJyZW50Q29sb3IiIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIvPjwvc3ZnPg==;
-
-    /* icons by location name */
-    --fk-icon-fileItem: var(--fk-icon-fileDoc);
-    --fk-icon-fileRemove: var(--fk-icon-close);
-    --fk-icon-noFiles: var(--fk-icon-fileDoc);
-    --fk-icon-select: var(--fk-icon-down);
-    --fk-icon-checkboxDecorator: var(--fk-icon-check);
-    --fk-icon-radioDecorator: var(--fk-icon-circle);
-  }
-
-  [data-type='checkbox'] .formkit-input ~ .formkit-decorator .formkit-icon,
-  [data-type='radio'] .formkit-input ~ .formkit-decorator .formkit-icon {
-    padding: 2px;
-  }
-  [data-type='radio'] .formkit-input ~ .formkit-decorator .formkit-icon {
-    padding: 3px;
-  }
-
-  [data-invalid] .formkit-inner {
-    --fk-color-border-focus: var(--fk-color-danger);
-    --fk-color-border-shadow: var(--bms-red-10);
-
-    box-shadow: 0 0 0 var(--fk-border-width-focus) var(--fk-color-border-focus),
-      0 0 2px 2px var(--fk-color-border-shadow);
-  }
-}

package/src/components/form/Form.stories.js

@@ -1,35 +0,0 @@
-import template from '@/documentation/template_field_dependency.mdx';
-
-export default {
-  parameters: {
-    docs: {
-      page: template,
-    },
-  },
-  title: 'Composants/form/Formkit Exemple',
-};
-
-const Template = () => ({
-  template: `
-  <FormKit type="form" >
-  <FormKit
-    type="text"
-    label="Champ texte"
-    placeholder="Placeholder"
-  />
-  <FormKit
-    type="select"
-    label="Select"
-    :options="['titi', 'toto']"
-  />
-  <FormKit
-    type="select"
-    disabled
-    label="Select disabled"
-  />
-    </FormKit>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {};

package/src/documentation/primaryButton.mdx

@@ -1,20 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
-import { Primary as BmsButton } from '../components/button/BmsButton.stories.js';
-
-<Meta title="Documentation/Buttons/Primary Button" />
-
-# <img src="./BmsIcon.png" /> Primary Button
-
-The primary button should represent the main action on a screen, there should only be one primary button on an interface, if multiple actions are possible then it is essential to create a hierarchy of actions and use a primary and several secondary or tertiary.
-
-![](./button/CoverPrimaryButton.png)
-
-## Anatomy
-
-Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.
-
-![](./button/PrimaryButtonRepresentation.png)
-
-## Component
-
-<Canvas of={BmsButton} args={{ type: 'primary' }} />