@mozaic-ds/web-components 1.0.0-beta.7 → 1.0.0

package/dist/components/field/Field.stories.js

@@ -1,149 +1,93 @@
-/**
- * > Fields enable the user to input content in a form. It displays a label, useful informations, an input and gives validation feedback.
- *
- * The `MField` component is the **Svelte / WebComponent** implementation of the **Field** component of Mozaic Design System.<br/>
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/field/).
- */
-export default {
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+const meta = {
     title: 'Form Elements/Field',
-    tags: ['autodocs', 'beta'],
-    argTypes: {
-        id: {
-            description: 'Specify the id of the label & the form element used inside the field',
-            control: 'text',
-        },
-        label: {
-            description: 'Specify the field label text',
-            control: 'text',
-        },
-        requirementtext: {
-            description: 'Specify the requirement text when the field is required',
-            control: 'text',
-        },
-        helpid: {
-            description: 'Specify the id of the span element containing the help text',
-            control: 'text',
-        },
-        helptext: {
-            description: 'Specify the help text',
-            control: 'text',
-        },
-        messageid: {
-            description: 'Specify the id of the span element containing the rerror message when the field is invalid',
-            control: 'text',
-        },
-        message: {
-            description: 'Specify the error message',
-            control: 'text',
-        },
-        isinvalid: {
-            description: 'If `true`, applies an invalid state to the form field.',
-            control: 'boolean',
-        },
-        isvalid: {
-            description: 'If `true`, applies a valid state to the form field',
-            control: 'boolean',
-        },
-        default: {
-            description: 'Use this slot to insert the form element of your choice',
-            table: {
-                category: 'Slots',
-            },
-        },
+    component: 'm-field',
+    args: {
+        label: 'Label',
+        id: 'ReplaceByInputId',
+        default: `
+      <!-- All the code below must be replaced by a form element. -->
+      <div class="content-slot">
+        Insert a form element here to replace this slot.
+      </div>
+    `,
     },
+    render: (args) => html `
+    <m-field
+      id=${ifDefined(args.id)}
+      label=${ifDefined(args.label)}
+      requirementtext=${ifDefined(args.requirementtext)}
+      helptext=${ifDefined(args.helptext)}
+      helpid=${ifDefined(args.helpid)}
+      isvalid=${ifDefined(args.isvalid)}
+      isinvalid=${ifDefined(args.isinvalid)}
+      messageid=${ifDefined(args.messageid)}
+      message=${ifDefined(args.message)}
+    >
+      ${unsafeHTML(ifDefined(args.default))}
+    </m-field>
+  `,
 };
-const TemplateDefault = (args) => {
-    const MField = document.createElement('m-field');
-    if (args.label)
-        MField.setAttribute('label', args.label || 'Label');
-    if (args.requirementtext)
-        MField.setAttribute('requirementtext', args.requirementtext);
-    if (args.helpid)
-        MField.setAttribute('helpid', args.helpid);
-    if (args.helptext)
-        MField.setAttribute('helptext', args.helptext);
-    if (args.messageid)
-        MField.setAttribute('messageid', args.messageid);
-    if (args.message)
-        MField.setAttribute('message', args.message);
-    const Slot = document.createElement('div');
-    Slot.classList.add('content-slot');
-    Slot.innerHTML = 'Insert a form element here to replace this slot.';
-    MField.appendChild(Slot);
-    return MField;
-};
-export const Default = TemplateDefault.bind({});
-Default.args = {
-    id: 'defaultfield',
-    label: 'Label',
-};
-const Template = (args) => {
-    const MField = document.createElement('m-field');
-    if (args.label)
-        MField.setAttribute('label', args.label);
-    if (args.requirementtext)
-        MField.setAttribute('requirementtext', args.requirementtext);
-    if (args.helpid)
-        MField.setAttribute('helpid', args.helpid);
-    if (args.helptext)
-        MField.setAttribute('helptext', args.helptext);
-    if (args.messageid)
-        MField.setAttribute('messageid', args.messageid);
-    if (args.message)
-        MField.setAttribute('message', args.message);
-    const MTextInput = document.createElement('m-textinput');
-    MTextInput.classList.add('mc-field__element');
-    if (args.id) {
-        MField.setAttribute('id', args.id);
-        MTextInput.setAttribute('name', args.id);
-    }
-    if (args.isinvalid) {
-        MField.setAttribute('isinvalid', args.isinvalid);
-        MTextInput.setAttribute('isinvalid', args.isinvalid);
-    }
-    if (args.isvalid) {
-        MField.setAttribute('isvalid', args.isvalid);
-        MTextInput.setAttribute('isvalid', args.isvalid);
-    }
-    MField.appendChild(MTextInput);
-    return MField;
-};
-export const Requierement = Template.bind({});
-Requierement.args = {
-    id: 'requiredfield',
-    label: 'Label',
-    requirementtext: '(required / optionnal)',
-    required: true,
-};
-export const Helper = Template.bind({});
-Helper.args = {
-    id: 'helpfield',
-    label: 'Label',
-    helpid: 'helptext',
-    helptext: 'Help text',
+export default meta;
+export const Default = {};
+export const Input = {
+    args: {
+        label: 'Label',
+        id: 'inputId',
+        default: `
+      <m-textinput
+        id="inputId"
+        placeholder="Placeholder"
+      ></m-textinput>
+    `,
+    },
 };
-export const FullExample = Template.bind({});
-FullExample.args = {
-    id: 'helpfield',
-    label: 'Label',
-    helpid: 'helptext',
-    helptext: 'Help text',
-    requirementtext: '(required / optionnal)',
-    required: true,
+export const InputFull = {
+    args: {
+        label: 'Label',
+        requirementtext: 'optional',
+        helptext: 'Help text',
+        id: 'inputFullId',
+        default: `
+      <m-textinput
+        id="inputFullId"
+        placeholder="Placeholder"
+      ></m-textinput>
+    `,
+    },
 };
-export const Valid = Template.bind({});
-Valid.args = {
-    id: 'validfield',
-    label: 'Label',
-    messageid: 'error1',
-    message: 'Validation message (Be concise and use comprehensive words).',
-    isvalid: true,
+export const InputValid = {
+    args: {
+        label: 'Label',
+        requirementtext: 'required',
+        helptext: 'Help text',
+        id: 'inputvalidId',
+        isvalid: true,
+        message: 'Validation message (Be concise and use comprehensive words).',
+        default: `
+      <m-textinput
+        id="inputvalidId"
+        placeholder="Placeholder"
+      ></m-textinput>
+    `,
+    },
 };
-export const Invalid = Template.bind({});
-Invalid.args = {
-    id: 'invalidfield',
-    label: 'Label',
-    messageid: 'error1',
-    message: 'Error message (Be concise and use comprehensive words)',
-    isinvalid: true,
+export const InputInvalid = {
+    args: {
+        label: 'Label',
+        requirementtext: 'required',
+        helptext: 'Help text',
+        id: 'inputInvalidId',
+        isinvalid: true,
+        message: 'Error message (Be concise and use comprehensive words)',
+        default: `
+      <m-textinput
+        id="inputInvalidId"
+        placeholder="Placeholder"
+        isInvalid
+      ></m-textinput>
+    `,
+    },
 };

package/dist/components/field/Field.svelte

@@ -5,17 +5,48 @@
 />
 
 <script lang="ts">
+  /**
+   * A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.
+   *
+   * @slot default - Use this slot to insert the form element of your choice
+   */
   interface Props {
+    /**
+     * A unique identifier for the form field, used to associate the label with the form element.
+     */
     id: string;
+    /**
+     * The text displayed as the label for the form field.
+     */
     label: string;
-    requirementtext: string;
-    helpid: string;
-    helptext: string;
-    messageid: string;
-    message: string;
-    isinvalid?: boolean;
+    /**
+     * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional
+     */
+    requirementtext?: string;
+    /**
+     * Text shown below the form field to provide additional context or instructions for the user.
+     */
+    helptext?: string;
+    /**
+     * The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._
+     */
+    helpid?: string;
+    /**
+     * If `true`, applies a valid state to the form field.
+     */
     isvalid?: boolean;
-    [key: string]: any;
+    /**
+     * If `true`, applies an invalid state to the form field.
+     */
+    isinvalid?: boolean;
+    /**
+     * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._
+     */
+    messageid?: string;
+    /**
+     * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.
+     */
+    message?: string;
   }
 
   let {
@@ -26,8 +57,8 @@
     helptext,
     messageid,
     message,
-    isinvalid = false,
-    isvalid = false,
+    isinvalid,
+    isvalid,
   }: Props = $props();
 </script>
 
@@ -40,20 +71,25 @@
       </span>
     {/if}
   </label>
+
   {#if helpid && helptext}
     <span id={helpid} class="mc-field__help">
       {helptext}
     </span>
   {/if}
+
   <div class="mc-field__content">
     <slot />
   </div>
+
   {#if isinvalid || isvalid}
     <span
       id={messageid}
-      class="mc-field__validation-message"
-      class:is-valid={isvalid}
-      class:is-invalid={isinvalid}
+      class={[
+        'mc-field__validation-message',
+        isvalid && 'is-valid',
+        isinvalid && 'is-invalid',
+      ]}
     >
       {message}
     </span>

package/dist/components/field/Field.svelte.d.ts

@@ -1,14 +1,45 @@
+/**
+ * A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.
+ *
+ * @slot default - Use this slot to insert the form element of your choice
+ */
 interface Props {
+    /**
+     * A unique identifier for the form field, used to associate the label with the form element.
+     */
     id: string;
+    /**
+     * The text displayed as the label for the form field.
+     */
     label: string;
-    requirementtext: string;
-    helpid: string;
-    helptext: string;
-    messageid: string;
-    message: string;
-    isinvalid?: boolean;
+    /**
+     * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional
+     */
+    requirementtext?: string;
+    /**
+     * Text shown below the form field to provide additional context or instructions for the user.
+     */
+    helptext?: string;
+    /**
+     * The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._
+     */
+    helpid?: string;
+    /**
+     * If `true`, applies a valid state to the form field.
+     */
     isvalid?: boolean;
-    [key: string]: any;
+    /**
+     * If `true`, applies an invalid state to the form field.
+     */
+    isinvalid?: boolean;
+    /**
+     * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._
+     */
+    messageid?: string;
+    /**
+     * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.
+     */
+    message?: string;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/components/field/Field.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAiDH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;;;;;UAAqF,CAAC;AAC/E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Field.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAwDH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;;;;;UAAqF,CAAC;AAC/E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}

package/dist/components/field/README.md

@@ -0,0 +1,24 @@
+# `m-field`
+
+A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the form field, used to associate the label with the form element. | `string` |   |
+| `label*` | The text displayed as the label for the form field. | `string` |   |
+| `requirementtext` | Additional text displayed alongside the label, typically used to indicate if the form field is required or optional | `string` |   |
+| `helptext` | Text shown below the form field to provide additional context or instructions for the user. | `string` |   |
+| `helpid` | The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._ | `string` |   |
+| `isvalid` | If `true`, applies a valid state to the form field. | `boolean` |   |
+| `isinvalid` | If `true`, applies an invalid state to the form field. | `boolean` |   |
+| `messageid` | The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._ | `string` |   |
+| `message` | message displayed when the form field has a valid or invalid state, usually indicating validation or errors. | `string` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `default` | Use this slot to insert the form element of your choice |
+

package/dist/components/flag/Flag.js

@@ -1,4 +1,4 @@
-import{c as g,p as i,a as v,b as p,f as m,D as u,d as n,h,i as b,j as k,r as s}from"../../custom-element.js";import{s as _}from"../../slot.js";import{b as x}from"../../attributes.js";var $=m('<div><span class="mc-flag__label"><!></span></div>');const w={hash:"svelte-1e4tn4t",code:`/**
+import{c as v,p,a as u,b as c,f as m,t as b,i as h,j as x,k as o,d as f,r as g,e as k,g as _,h as w}from"../../custom-element.js";var y=m('<div><span class="mc-flag__label"> </span></div>');const z={hash:"svelte-1e4tn4t",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-flag.svelte-1e4tn4t {padding:0 0.5rem;border-radius:var(--radius-xs, 0.125rem);white-space:nowrap;font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);height:1.5rem;display:inline-flex;align-items:center;color:var(--flag-color-text-standard, #ffffff);background-color:var(--flag-color-background-standard, #191919);}.mc-flag--accent.svelte-1e4tn4t {color:var(--flag-color-text-accent, #ffffff);background-color:var(--flag-color-background-accent, #117f03);}.mc-flag--danger.svelte-1e4tn4t {color:var(--flag-color-text-danger, #ffffff);background-color:var(--flag-color-background-danger, #c61112);}.mc-flag--inverse.svelte-1e4tn4t {color:var(--flag-color-text-inverse, #000000);background-color:var(--flag-color-background-inverse, #ffffff);}`};function y(t,a){i(a,!0),v(t,w);let e=p(a,"appearance",7,"standard"),l=u(a,["$$slots","$$events","$$legacy","$$host","appearance"]);var c={get appearance(){return e()},set appearance(d="standard"){e(d),k()}},r=$();x(r,()=>({class:`mc-flag ${e()!=="standard"?`mc-flag--${e()}`:""}`,...l}),void 0,void 0,"svelte-1e4tn4t");var o=n(r),f=n(o);return _(f,a,"default",{}),s(o),s(r),h(t,r),b(c)}customElements.define("m-flag",g(y,{appearance:{}},["default"],[],!0));
+ */.mc-flag.svelte-1e4tn4t {padding:0 0.5rem;border-radius:var(--radius-xs, 0.125rem);white-space:nowrap;font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);height:1.5rem;display:inline-flex;align-items:center;color:var(--flag-color-text-standard, #ffffff);background-color:var(--flag-color-background-standard, #191919);}.mc-flag--accent.svelte-1e4tn4t {color:var(--flag-color-text-accent, #ffffff);background-color:var(--flag-color-background-accent, #117f03);}.mc-flag--danger.svelte-1e4tn4t {color:var(--flag-color-text-danger, #ffffff);background-color:var(--flag-color-background-danger, #c61112);}.mc-flag--inverse.svelte-1e4tn4t {color:var(--flag-color-text-inverse, #000000);background-color:var(--flag-color-background-inverse, #ffffff);}`};function j(n,a){p(a,!0),u(n,z);let r=c(a,"appearance",7,"standard"),t=c(a,"label",7);var d={get appearance(){return r()},set appearance(l="standard"){r(l),o()},get label(){return t()},set label(l){t(l),o()}},e=y(),s=f(e),i=f(s,!0);return g(s),g(e),b(()=>{k(e,1,_(["mc-flag",`mc-flag--${r()}`]),"svelte-1e4tn4t"),w(i,t())}),h(n,e),x(d)}customElements.define("m-flag",v(j,{appearance:{},label:{}},[],[],!0));
 //# sourceMappingURL=Flag.js.map

package/dist/components/flag/Flag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flag.js","sources":["../../../src/components/flag/Flag.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-flag' }} />\n\n<script lang=\"ts\">\n  interface Props {\n    /**\n     * Style du Flag\n     */\n    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n\n    [key: string]: any;\n  }\n\n  let { appearance = 'standard', ...events }: Props = $props();\n</script>\n\n<div\n  class={`mc-flag ${appearance !== 'standard' ? `mc-flag--${appearance}` : ''}`}\n  {...events}\n>\n  <span class=\"mc-flag__label\">\n    <slot />\n  </span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/flag';\n</style>\n"],"names":["appearance","events","$.rest_props","$$props"],"mappings":";;q0BAAA,gBAYQ,IAAAA,qBAAa,UAAU,EAAKC,EAAMC,EAAAC,EAAA,CAAA,UAAA,WAAA,WAAA,SAAA,YAAA,CAAA,uDAArB,WAAU,4BAIX,MAAA,WAAAH,EAAU,IAAK,WAAU,YAAeA,EAAU,IAAK,EAAE,MACvEC,sGAJN"}
+{"version":3,"file":"Flag.js","sources":["../../../src/components/flag/Flag.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-flag' }} />\n\n<script lang=\"ts\">\n  /**\n   * A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content. It is typically placed at the top of an element to ensure immediate visibility.\n   */\n  interface Props {\n    /**\n     * Label of the Flag.\n     */\n    label: string;\n    /**\n     * Allows to define the Flag appearance.\n     */\n    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n  }\n\n  let { appearance = 'standard', label }: Props = $props();\n</script>\n\n<div class={['mc-flag', `mc-flag--${appearance}`]}>\n  <span class=\"mc-flag__label\">\n    {label}\n  </span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/flag';\n</style>\n"],"names":["appearance","label","$.prop","$$props","$.set_class","div","$.clsx"],"mappings":";;q0BAAA,gBAiBQ,IAAAA,qBAAa,UAAU,EAAEC,EAAKC,EAAAC,EAAA,QAAA,CAAA,uDAAjB,WAAU,0GAGlBC,EAAAC,EAAA,EAAAC,EAAA,CAAA,sBAAuBN,EAAU,CAAA,EAAA,CAAA,EAAA,gBAAA,MAEzCC,GAAK,eAJV"}

package/dist/components/flag/Flag.spec.js

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Flag from './Flag.svelte';
+describe('m-flag component', () => {
+    it('renders with default appearance', () => {
+        const { container, getByText } = render(Flag, {
+            props: { label: 'New' },
+        });
+        const flag = container.querySelector('.mc-flag');
+        expect(flag).toBeTruthy();
+        expect(flag?.classList.contains('mc-flag--standard')).toBe(true);
+        const label = getByText('New');
+        expect(label).toBeInTheDocument();
+        expect(label.classList.contains('mc-flag__label')).toBe(true);
+    });
+    it('applies the correct appearance class', () => {
+        const { container } = render(Flag, {
+            props: { label: 'Sale', appearance: 'danger' },
+        });
+        const flag = container.querySelector('.mc-flag');
+        expect(flag).toBeTruthy();
+        expect(flag?.classList.contains('mc-flag--danger')).toBe(true);
+    });
+    it('renders the correct label text', () => {
+        const { getByText } = render(Flag, {
+            props: { label: 'Limited Offer' },
+        });
+        expect(getByText('Limited Offer')).toBeInTheDocument();
+    });
+});

package/dist/components/flag/Flag.stories.d.ts

@@ -1,19 +1,9 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content.
- *
- * The `MFlag` component is the **Svelte / WebComponent** implementation of the **Flag** component of Mozaic Design System.
- * Full specification available in the Mozaic documentation.
- */
-declare const _default: Meta;
-export default _default;
-export declare const Standard: any;
-export declare const Accent: any;
-export declare const Danger: any;
-export declare const Inverse: any;
-/**
- * Story d’interaction simple (démonstration) :
- * un clic sur l’hôte n’affecte pas le visuel mais valide que le composant est focusable/clicable si nécessaire.
- */
-export declare const ClickableHost: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Standard: Story;
+export declare const Accent: Story;
+export declare const Danger: Story;
+export declare const Inverse: Story;
 //# sourceMappingURL=Flag.stories.d.ts.map

package/dist/components/flag/Flag.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flag.stories.d.ts","sourceRoot":"","sources":["../../../src/components/flag/Flag.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBAyBE,IAAI;AAvBT,wBAuBU;AAiBV,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAmB1C,eAAO,MAAM,MAAM,KAAoB,CAAC;AAexC,eAAO,MAAM,MAAM,KAAoB,CAAC;AAexC,eAAO,MAAM,OAAO,KAAoB,CAAC;AAoBzC;;;GAGG;AACH,eAAO,MAAM,aAAa,KAAoB,CAAC"}
+{"version":3,"file":"Flag.stories.d.ts","sourceRoot":"","sources":["../../../src/components/flag/Flag.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAkBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/components/flag/Flag.stories.js

@@ -1,113 +1,35 @@
-import { userEvent, expect } from 'storybook/test';
-/**
- * A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content.
- *
- * The `MFlag` component is the **Svelte / WebComponent** implementation of the **Flag** component of Mozaic Design System.
- * Full specification available in the Mozaic documentation.
- */
-export default {
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+const meta = {
     title: 'Indicators/Flag',
-    tags: ['autodocs', 'beta', 'version:2.0.0'],
-    context: 'sidebar',
-    args: {
-        appearance: 'standard',
-        label: 'Flag Label',
-    },
+    component: 'm-flag',
     argTypes: {
         appearance: {
-            description: 'Style du flag. Valeurs disponibles : `standard`, `accent`, `danger`, `inverse`',
-            control: { type: 'radio' },
-            options: ['standard', 'accent', 'danger', 'inverse'],
-        },
-        default: {
-            description: 'Contenu du flag (slot par défaut)',
-            table: {
-                category: 'Slots',
-            },
-            control: 'text',
+            control: 'radio',
+            options: ['danger', 'accent', 'inverse', 'standard'],
         },
     },
-};
-const Template = (args) => {
-    const flag = document.createElement('m-flag');
-    flag.setAttribute('data-testid', args.label || 'Flag');
-    // Attributs
-    if (args.appearance)
-        flag.setAttribute('appearance', args.appearance);
-    // Slot (label)
-    const label = document.createElement('span');
-    label.innerText = args.label || 'Flag Label';
-    flag.appendChild(label);
-    return flag;
-};
-export const Standard = Template.bind({});
-Standard.args = {
-    appearance: 'standard',
-    label: 'Standard',
-};
-Standard.play = async ({ canvasElement }) => {
-    const MFlag = canvasElement.querySelector('m-flag');
-    const inner = MFlag?.shadowRoot?.querySelector('.mc-flag__label');
-    expect(inner).not.toBeNull();
-    expect(MFlag).toHaveTextContent('Standard');
-    // pas de modificateur attendu pour standard
-    const container = MFlag?.shadowRoot?.querySelector('.mc-flag');
-    expect(container?.className).not.toContain('mc-flag--');
-};
-export const Accent = Template.bind({});
-Accent.args = {
-    appearance: 'accent',
-    label: 'Accent',
-};
-Accent.play = async ({ canvasElement }) => {
-    const MFlag = canvasElement.querySelector('m-flag');
-    const container = MFlag?.shadowRoot?.querySelector('.mc-flag');
-    expect(container).not.toBeNull();
-    expect(MFlag).toHaveTextContent('Accent');
-    expect(container?.className).toContain('mc-flag--accent');
-};
-export const Danger = Template.bind({});
-Danger.args = {
-    appearance: 'danger',
-    label: 'Danger',
-};
-Danger.play = async ({ canvasElement }) => {
-    const MFlag = canvasElement.querySelector('m-flag');
-    const container = MFlag?.shadowRoot?.querySelector('.mc-flag');
-    expect(container).not.toBeNull();
-    expect(MFlag).toHaveTextContent('Danger');
-    expect(container?.className).toContain('mc-flag--danger');
-};
-export const Inverse = Template.bind({});
-Inverse.globals = {
-    backgrounds: {
-        value: 'inverse',
+    args: {
+        label: 'Flag label',
     },
-};
-Inverse.args = {
-    appearance: 'inverse',
-    label: 'Inverse',
-};
-Inverse.play = async ({ canvasElement }) => {
-    const MFlag = canvasElement.querySelector('m-flag');
-    const container = MFlag?.shadowRoot?.querySelector('.mc-flag');
-    expect(container).not.toBeNull();
-    expect(MFlag).toHaveTextContent('Inverse');
-    expect(container?.className).toContain('mc-flag--inverse');
-};
-/**
- * Story d’interaction simple (démonstration) :
- * un clic sur l’hôte n’affecte pas le visuel mais valide que le composant est focusable/clicable si nécessaire.
- */
-export const ClickableHost = Template.bind({});
-ClickableHost.args = {
-    appearance: 'accent',
-    label: 'Cliquable',
-};
-ClickableHost.play = async ({ canvasElement }) => {
-    const MFlag = canvasElement.querySelector('m-flag');
-    expect(MFlag).not.toBeNull();
-    await userEvent.click(MFlag);
-    // Le composant n’a pas d’événement spécifique par défaut, on vérifie juste le contenu.
-    expect(MFlag).toHaveTextContent('Cliquable');
+    render: (args) => html `
+    <m-flag
+      label=${ifDefined(args.label)}
+      appearance=${ifDefined(args.appearance)}
+    ></m-flag>
+  `,
+};
+export default meta;
+export const Standard = {};
+export const Accent = {
+    args: { appearance: 'accent' },
+};
+export const Danger = {
+    args: { appearance: 'danger' },
+};
+export const Inverse = {
+    globals: {
+        backgrounds: { value: 'inverse' },
+    },
+    args: { appearance: 'inverse' },
 };