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

package/dist/components/callout/Callout.stories.js

@@ -6,64 +6,11 @@ import '@mozaic-ds/icons-svelte/custom-elements/ArrowNext20/ArrowNext20.js';
 const meta = {
     title: 'Content/Callout',
     component: 'm-callout',
-    parameters: {
-        docs: {
-            description: {
-                component: 'A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.',
-            },
-        },
-    },
+    tags: ['v2'],
     argTypes: {
-        title: {
-            control: 'text',
-            description: 'Title of the callout.',
-            type: { name: 'string', required: true },
-            table: {
-                category: 'attributes',
-            },
-        },
-        description: {
-            control: 'text',
-            description: 'Description of the callout.',
-            type: { name: 'string', required: true },
-            table: {
-                category: 'attributes',
-            },
-        },
         appearance: {
-            control: { type: 'radio' },
+            control: 'radio',
             options: ['standard', 'accent', 'tips', 'inverse'],
-            description: 'Allows to define the callout appearance.',
-            defaultValue: 'standard',
-            table: {
-                type: { summary: "'standard' | 'accent' | 'tips' | 'inverse'" },
-                defaultValue: { summary: 'standard' },
-                category: 'attributes',
-            },
-        },
-        icon: {
-            description: 'Use this slot to insert an icon.',
-            control: { type: 'text' },
-            table: {
-                type: { summary: 'any' },
-                category: 'slots',
-            },
-        },
-        default: {
-            description: 'Use this slot to display custom content in the callout.',
-            control: { type: 'text' },
-            table: {
-                type: { summary: 'any' },
-                category: 'slots',
-            },
-        },
-        footer: {
-            description: 'Use this slot to insert a button or a link in the footer of the callout.',
-            control: { type: 'text' },
-            table: {
-                type: { summary: 'any' },
-                category: 'slots',
-            },
         },
     },
     args: {

package/dist/components/callout/Callout.svelte

@@ -3,6 +3,10 @@
 <script lang="ts">
   /**
    * A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.
+   *
+   * @slot icon - Use this slot to insert an icon.
+   * @slot default - Use this slot to insert custom content.
+   * @slot footer - Use this slot to insert a button or a link in the footer of the callout.
    */
   interface Props {
     /**

package/dist/components/callout/Callout.svelte.d.ts

@@ -1,5 +1,9 @@
 /**
  * A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.
+ *
+ * @slot icon - Use this slot to insert an icon.
+ * @slot default - Use this slot to insert custom content.
+ * @slot footer - Use this slot to insert a button or a link in the footer of the callout.
  */
 interface Props {
     /**

package/dist/components/callout/Callout.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/callout/Callout.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;CACzD;AAoCH,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,OAAO;;;;;;;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Callout.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/callout/Callout.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;GAMG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;CACzD;AAoCH,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,OAAO;;;;;;;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}

package/dist/components/callout/README.md

@@ -0,0 +1,20 @@
+# `m-callout`
+
+A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `title*` | Title of the callout. | `string` |   |
+| `description*` | Description of the callout. | `string` |   |
+| `appearance` | Allows to define the callout appearance. | `'standard'` `'accent'` `'tips'` `'inverse'` | `standard` |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `icon` | Use this slot to insert an icon. |
+| `default` | Use this slot to insert custom content. |
+| `footer` | Use this slot to insert a button or a link in the footer of the callout. |
+

package/dist/components/checkbox/Checkbox.js

@@ -1,10 +1,10 @@
-import{n as H,c as j,k as D,p as F,a as S,b as a,f as C,d as p,s as A,t as w,e as G,o as I,h as z,i as J,j as i,r as E,g as K}from"../../custom-element.js";import{i as L}from"../../if.js";import{s as c,r as N}from"../../attributes.js";import{a as O}from"../../input.js";import{c as P}from"../../custom-element-forward-events.js";var Q=C('<label class="mc-checkbox__label svelte-zknfk3"> </label>'),R=C('<div class="mc-checkbox svelte-zknfk3"><input type="checkbox"/> <!></div>');const T={hash:"svelte-zknfk3",code:`/**
+import{c as M,p as H,a as j,b as n,f as z,s as D,d as u,t as g,i as _,j as F,k as i,r as x,h as S,e as p,g as w}from"../../custom-element.js";import{i as q}from"../../if.js";import{r as A,s}from"../../attributes.js";import{a as G}from"../../input.js";import{c as I}from"../../custom-element-forward-events.js";var J=z('<label class="mc-checkbox__label svelte-zknfk3"> </label>'),K=z('<div><input type="checkbox"/> <!></div>');const L={hash:"svelte-zknfk3",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
-/* stylelint-disable string-no-newline */.mc-checkbox.svelte-zknfk3 {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-checkbox__label.svelte-zknfk3 {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-checkbox__input.svelte-zknfk3 {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-m, 0.125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-radius-border, 0.25rem);transition:all ease 200ms;height:1.25rem;width:1.25rem;}.mc-checkbox__input.svelte-zknfk3:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-checkbox__input.svelte-zknfk3:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-checkbox__input.svelte-zknfk3:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-zknfk3:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-zknfk3:checked, .mc-checkbox__input.svelte-zknfk3:indeterminate {background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center;}.mc-checkbox__input.svelte-zknfk3:checked, .mc-checkbox__input.svelte-zknfk3:indeterminate, .mc-checkbox__input.svelte-zknfk3:disabled {border-color:transparent;}.mc-checkbox__input.svelte-zknfk3:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-checkbox__input.svelte-zknfk3:disabled:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-zknfk3:disabled:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-zknfk3:disabled + .mc-checkbox__label:where(.svelte-zknfk3) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-checkbox__input.svelte-zknfk3:not(:disabled):checked:hover, .mc-checkbox__input.svelte-zknfk3:not(:disabled):indeterminate:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-checkbox__input.is-invalid.svelte-zknfk3:not(:checked, :indeterminate) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-checkbox__input.is-invalid.svelte-zknfk3:not(:checked, :indeterminate):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
+/* stylelint-disable string-no-newline */.mc-checkbox.svelte-zknfk3 {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-checkbox--indented.svelte-zknfk3 {margin-left:1.75rem;}.mc-checkbox__label.svelte-zknfk3 {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-checkbox__input.svelte-zknfk3 {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-m, 0.125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-radius-border, 0.25rem);transition:all ease 200ms;height:1.25rem;width:1.25rem;}.mc-checkbox__input.svelte-zknfk3:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-checkbox__input.svelte-zknfk3:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-checkbox__input.svelte-zknfk3:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-zknfk3:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-zknfk3:checked, .mc-checkbox__input.svelte-zknfk3:indeterminate {background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center;}.mc-checkbox__input.svelte-zknfk3:checked, .mc-checkbox__input.svelte-zknfk3:indeterminate, .mc-checkbox__input.svelte-zknfk3:disabled {border-color:transparent;}.mc-checkbox__input.svelte-zknfk3:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-checkbox__input.svelte-zknfk3:disabled:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-zknfk3:disabled:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-zknfk3:disabled + .mc-checkbox__label:where(.svelte-zknfk3) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-checkbox__input.svelte-zknfk3:not(:disabled):checked:hover, .mc-checkbox__input.svelte-zknfk3:not(:disabled):indeterminate:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-checkbox__input.is-invalid.svelte-zknfk3:not(:checked, :indeterminate) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-checkbox__input.is-invalid.svelte-zknfk3:not(:checked, :indeterminate):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
 
 /* stylelint-enable string-no-newline */
 /* stylelint-disable string-no-newline */
 
-/* stylelint-enable string-no-newline */`};function U(g,t){const _=D();F(t,!0),S(g,T);let d=a(t,"name",7,"checkbox"),o=a(t,"id",7,_),l=a(t,"label",7),m=a(t,"indeterminate",7,!1),f=a(t,"disabled",7,!1),s=a(t,"isinvalid",7,!1),k=a(t,"required",7,!1),h=a(t,"checked",15,!1),u=a(t,"onchange",7),v=a(t,"onblur",7);var y={get name(){return d()},set name(e="checkbox"){d(e),i()},get id(){return o()},set id(e=_){o(e),i()},get label(){return l()},set label(e){l(e),i()},get indeterminate(){return m()},set indeterminate(e=!1){m(e),i()},get disabled(){return f()},set disabled(e=!1){f(e),i()},get isinvalid(){return s()},set isinvalid(e=!1){s(e),i()},get required(){return k()},set required(e=!1){k(e),i()},get checked(){return h()},set checked(e=!1){h(e),i()},get onchange(){return u()},set onchange(e){u(e),i()},get onblur(){return v()},set onblur(e){v(e),i()}},b=R(),r=p(b);N(r);let x;r.__change=function(...e){var n;(n=u())==null||n.apply(this,e)};var q=A(r,2);{var B=e=>{var n=Q(),M=p(n,!0);E(n),w(()=>{c(n,"for",o()),K(M,l())}),z(e,n)};L(q,e=>{l()&&e(B)})}return E(b),w(e=>{c(r,"id",o()),x=G(r,1,"mc-checkbox__input svelte-zknfk3",null,x,e),c(r,"aria-invalid",s()),c(r,"name",d()),r.disabled=f(),r.indeterminate=m(),r.required=k()},[()=>({"is-invalid":s()})]),I("blur",r,function(...e){var n;(n=v())==null||n.apply(this,e)}),O(r,h),z(g,b),J(y)}H(["change"]);customElements.define("m-checkbox",j(U,{name:{},id:{},label:{},indeterminate:{},disabled:{},isinvalid:{},required:{},checked:{},onchange:{},onblur:{}},[],[],!0,P));
+/* stylelint-enable string-no-newline */`};function N(h,r){H(r,!0),j(h,L);let a=n(r,"id",7),m=n(r,"name",7),o=n(r,"label",7),k=n(r,"checked",15,!1),f=n(r,"indeterminate",7),v=n(r,"disabled",7),c=n(r,"isinvalid",7),b=n(r,"indented",7);var E={get id(){return a()},set id(e){a(e),i()},get name(){return m()},set name(e){m(e),i()},get label(){return o()},set label(e){o(e),i()},get checked(){return k()},set checked(e=!1){k(e),i()},get indeterminate(){return f()},set indeterminate(e){f(e),i()},get disabled(){return v()},set disabled(e){v(e),i()},get isinvalid(){return c()},set isinvalid(e){c(e),i()},get indented(){return b()},set indented(e){b(e),i()}},l=K(),t=u(l);A(t);var C=D(t,2);{var y=e=>{var d=J(),B=u(d,!0);x(d),g(()=>{s(d,"for",a()),S(B,o())}),_(e,d)};q(C,e=>{o()&&e(y)})}return x(l),g(()=>{p(l,1,w(["mc-checkbox",b()&&"mc-checkbox--indented"]),"svelte-zknfk3"),s(t,"id",a()),p(t,1,w(["mc-checkbox__input",c()&&"is-invalid"]),"svelte-zknfk3"),s(t,"aria-invalid",c()),s(t,"name",m()),t.disabled=v(),t.indeterminate=f()}),G(t,k),_(h,l),F(E)}customElements.define("m-checkbox",M(N,{checked:{attribute:"checked",reflect:!0,type:"Boolean"},id:{},name:{},label:{},indeterminate:{},disabled:{},isinvalid:{},indented:{}},[],[],!0,I));
 //# sourceMappingURL=Checkbox.js.map

package/dist/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n\n  interface Props {\n    name: string;\n    label?: string;\n    id?: string;\n    checked?: boolean;\n    indeterminate?: boolean;\n    disabled?: boolean;\n    isinvalid?: boolean;\n    required?: boolean;\n    onchange?: (event: Event) => void;\n    onblur?: (event: FocusEvent) => void;\n  }\n\n  const uid = $props.id();\n  let {\n    name = 'checkbox',\n    id = uid,\n    label,\n    indeterminate = false,\n    disabled = false,\n    isinvalid = false,\n    required = false,\n    checked = $bindable(false),\n    onchange,\n    onblur,\n  }: Props = $props();\n</script>\n\n<div class=\"mc-checkbox\">\n  <input\n    {id}\n    type=\"checkbox\"\n    class=\"mc-checkbox__input\"\n    class:is-invalid={isinvalid}\n    aria-invalid={isinvalid}\n    {name}\n    {disabled}\n    {indeterminate}\n    {required}\n    bind:checked\n    {onchange}\n    {onblur}\n  />\n  {#if label}\n    <label for={id} class=\"mc-checkbox__label\">{label}</label>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/checkbox';\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["uid","$.props_id","name","id","label","$.prop","$$props","indeterminate","disabled","isinvalid","required","checked","onchange","onblur","$$render","consequent","customElementForwardEvents"],"mappings":";;;;;;;;0DAAA,OAuBQA,EAAGC,EAAA,iBAEP,IAAAC,eAAO,UAAU,EACjBC,aAAKH,CAAG,EACRI,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,wBAAgB,EAAK,EACrBC,mBAAW,EAAK,EAChBC,oBAAY,EAAK,EACjBC,mBAAW,EAAK,EAChBC,mBAAoB,EAAK,EACzBC,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAMR,EAAAC,EAAA,SAAA,CAAA,2CATC,WAAU,yCACZN,EAAG,8GAEQ,GAAK,qDACV,GAAK,uDACJ,GAAK,qDACN,GAAK,mDACI,GAAK,4QAsBbG,GAAE,MAA8BC,GAAK,oBAD9CA,EAAK,GAAAU,EAAAC,CAAA,4GATMN,GAAS,yFADLA,EAAS,GAAA,sFAP/B,+KAjCYO"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox',\n    props: {\n      checked: { reflect: true, type: 'Boolean', attribute: 'checked' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the checkbox, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the checkbox element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The text label displayed next to the checkbox.\n     */\n    label?: string;\n    /**\n     * The checkbox's checked state.\n     */\n    checked?: boolean;\n    /**\n     * Sets the checkbox to an indeterminate state (partially selected).\n     */\n    indeterminate?: boolean;\n    /**\n     * If `true`, applies an invalid state to the checkbox.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the checkbox, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, indent the checkbox.\n     */\n    indented?: boolean;\n  }\n\n  let {\n    id,\n    name,\n    label,\n    checked = $bindable(false),\n    indeterminate,\n    disabled,\n    isinvalid,\n    indented,\n  }: Props = $props();\n</script>\n\n<div class={['mc-checkbox', indented && 'mc-checkbox--indented']}>\n  <input\n    {id}\n    type=\"checkbox\"\n    class={['mc-checkbox__input', isinvalid && 'is-invalid']}\n    aria-invalid={isinvalid}\n    {name}\n    {disabled}\n    {indeterminate}\n    bind:checked\n  />\n  {#if label}\n    <label for={id} class=\"mc-checkbox__label\">{label}</label>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/checkbox';\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["id","$.prop","$$props","name","label","checked","indeterminate","disabled","isinvalid","indented","$$render","consequent","customElementForwardEvents"],"mappings":";;;;;;;;0DAAA,oBAmDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLG,mBAAoB,EAAK,EACzBC,EAAaL,EAAAC,EAAA,gBAAA,CAAA,EACbK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAASP,EAAAC,EAAA,YAAA,CAAA,EACTO,EAAQR,EAAAC,EAAA,WAAA,CAAA,sLAJY,GAAK,gUAoBbF,GAAE,MAA8BI,GAAK,oBAD9CA,EAAK,GAAAM,EAAAC,CAAA,gCAXC,cAAeF,KAAY,uBAAuB,CAAA,EAAA,eAAA,yBAInD,qBAAsBD,KAAa,YAAY,CAAA,EAAA,eAAA,qBACzCA,GAAS,yEAP3B,wLAtDYI"}

package/dist/components/checkbox/Checkbox.spec.js

@@ -0,0 +1,70 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Checkbox from './Checkbox.svelte';
+describe('m-checkbox component', () => {
+    const id = 'test-checkbox';
+    const label = 'Accept Terms';
+    it('renders with label and unchecked by default', () => {
+        const { container, getByLabelText } = render(Checkbox, {
+            props: { id, label },
+        });
+        const checkbox = getByLabelText(label);
+        expect(checkbox).toBeTruthy();
+        expect(checkbox.type).toBe('checkbox');
+        expect(checkbox.checked).toBe(false);
+        const labelEl = container.querySelector('label.mc-checkbox__label');
+        expect(labelEl).toBeTruthy();
+        expect(labelEl?.getAttribute('for')).toBe(id);
+        expect(labelEl?.textContent).toBe(label);
+    });
+    it('renders checked when prop is true', () => {
+        const { getByLabelText } = render(Checkbox, {
+            props: { id, label, checked: true },
+        });
+        const checkbox = getByLabelText(label);
+        expect(checkbox.checked).toBe(true);
+    });
+    it('binds checked state and updates on user click', async () => {
+        const { getByLabelText } = render(Checkbox, {
+            props: { id, label, checked: false },
+        });
+        const checkbox = getByLabelText(label);
+        expect(checkbox.checked).toBe(false);
+        await fireEvent.click(checkbox);
+        expect(checkbox.checked).toBe(true);
+    });
+    it('applies "is-invalid" class and aria-invalid when isinvalid=true', () => {
+        const { container, getByLabelText } = render(Checkbox, {
+            props: { id, label, isinvalid: true },
+        });
+        const checkbox = getByLabelText(label);
+        expect(checkbox).toHaveClass('is-invalid');
+        expect(checkbox).toHaveAttribute('aria-invalid', 'true');
+    });
+    it('renders disabled checkbox when disabled=true', () => {
+        const { getByLabelText } = render(Checkbox, {
+            props: { id, label, disabled: true },
+        });
+        const checkbox = getByLabelText(label);
+        expect(checkbox.disabled).toBe(true);
+    });
+    it('renders indeterminate state when indeterminate=true', () => {
+        const { getByLabelText } = render(Checkbox, {
+            props: { id, label, indeterminate: true },
+        });
+        const checkbox = getByLabelText(label);
+        expect(checkbox.indeterminate).toBe(true);
+    });
+    it('applies indented class when indented=true', () => {
+        const { container } = render(Checkbox, {
+            props: { id, indented: true },
+        });
+        const wrapper = container.querySelector('div.mc-checkbox');
+        expect(wrapper).toHaveClass('mc-checkbox--indented');
+    });
+    it('does not render label element if label prop is missing', () => {
+        const { container } = render(Checkbox, { props: { id } });
+        const labelEl = container.querySelector('label.mc-checkbox__label');
+        expect(labelEl).toBeNull();
+    });
+});

package/dist/components/checkbox/Checkbox.stories.d.ts

@@ -1,17 +1,12 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * Checkboxes are used to select one or multiple options in a list.
- * They usually find their place in forms and are also used to accept terms.
- *
- * The `MCheckbox` component is the **Svelte / WebComponent** implementation of the **Checkbox** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/checkbox/).
- */
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const Checked: any;
-export declare const Indeterminate: any;
-export declare const Disabled: any;
-export declare const Invalid: any;
-export declare const Required: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const Indeterminate: Story;
+export declare const Disabled: Story;
+export declare const Invalid: Story;
+export declare const IndeterminateDisabled: Story;
+export declare const CheckedDisabled: Story;
 //# sourceMappingURL=Checkbox.stories.d.ts.map

package/dist/components/checkbox/Checkbox.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,sBAAsB,CAAC;AAG1D;;;;;;GAMG;wBAqDE,IAAI;AAnDT,wBAmDU;AAmBV,eAAO,MAAM,OAAO,KAAoB,CAAC;AASzC,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,aAAa,KAAoB,CAAC;AAU/C,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAU1C,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,QAAQ,KAAoB,CAAC"}
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAkCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAMnC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC"}

package/dist/components/checkbox/Checkbox.stories.js

@@ -1,134 +1,77 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-import { expect, userEvent } from 'storybook/test';
-/**
- * Checkboxes are used to select one or multiple options in a list.
- * They usually find their place in forms and are also used to accept terms.
- *
- * The `MCheckbox` component is the **Svelte / WebComponent** implementation of the **Checkbox** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/checkbox/).
- */
-export default {
+const meta = {
     title: 'Form Elements/Checkbox',
-    tags: ['autodocs', 'beta'],
-    argTypes: {
-        label: {
-            description: 'Specify the label of the checkbox',
-            control: 'text',
-        },
-        name: {
-            description: 'Specify the name of the checkbox',
-            control: 'text',
-        },
-        id: {
-            description: 'Specify the id of the checkbox',
-            control: 'text',
-        },
-        checked: {
-            description: 'Determine whether the checkbox is checked',
-            control: 'boolean',
-        },
-        indeterminate: {
-            description: 'Determine whether the checkbox is indeterminate',
-            control: 'boolean',
-        },
-        disabled: {
-            description: 'Determine whether the checkbox is disabled',
-            control: 'boolean',
-        },
-        isinvalid: {
-            description: 'Determine whether the checkbox is invalid',
-            control: 'boolean',
-        },
-        required: {
-            description: 'Determine whether the checkbox is required',
-            control: 'boolean',
-        },
-        onChange: {
-            description: 'Event that occurs when the checkbox state changes',
-            action: 'change',
-            table: {
-                category: 'Events',
-            },
-        },
-        onBlur: {
-            description: 'Event that occurs when the checkbox state is blurred',
-            action: 'blur',
-            table: {
-                category: 'Events',
-            },
-        },
+    component: 'm-checkbox',
+    args: {
+        label: 'Label',
+        id: 'checkboxId',
+    },
+    render: (args) => {
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-checkbox
+        id=${ifDefined(args.id)}
+        name=${ifDefined(args.name)}
+        label=${ifDefined(args.label)}
+        checked=${ifDefined(args.checked)}
+        indeterminate=${ifDefined(args.indeterminate)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        disabled=${ifDefined(args.disabled)}
+        indented=${ifDefined(args.indented)}
+        @change=${(event) => {
+            onChange(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-checkbox>
+    `;
     },
 };
-const Template = (args) => {
-    const checkbox = document.createElement('m-checkbox');
-    checkbox.setAttribute('name', args.name || 'checkbox');
-    checkbox.setAttribute('label', args.label || 'Checkbox label');
-    if (args.id)
-        checkbox.setAttribute('id', args.id);
-    if (args.checked)
-        checkbox.setAttribute('checked', 'true');
-    if (args.indeterminate)
-        checkbox.setAttribute('indeterminate', 'true');
-    if (args.disabled)
-        checkbox.setAttribute('disabled', 'true');
-    if (args.isinvalid)
-        checkbox.setAttribute('isinvalid', 'true');
-    if (args.required)
-        checkbox.setAttribute('required', 'true');
-    checkbox.addEventListener('change', action('onChange'));
-    checkbox.addEventListener('blur', action('onBlur'));
-    return checkbox;
-};
-export const Default = Template.bind({});
-Default.play = async ({ canvasElement }) => {
-    const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox?.shadowRoot?.querySelector('input');
-    expect(checkbox).not.toBeNull();
-    await userEvent.click(input);
-    expect(input).toBeChecked();
-};
-export const Checked = Template.bind({});
-Checked.args = {
-    checked: true,
-};
-Checked.play = async ({ canvasElement }) => {
-    const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox?.shadowRoot?.querySelector('input');
-    expect(input).toBeChecked();
-};
-export const Indeterminate = Template.bind({});
-Indeterminate.args = {
-    indeterminate: true,
-};
-Indeterminate.play = async ({ canvasElement }) => {
-    const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox?.shadowRoot?.querySelector('input');
-    expect(input?.indeterminate).toBeTruthy();
-};
-export const Disabled = Template.bind({});
-Disabled.args = {
-    disabled: true,
+export default meta;
+export const Default = {};
+export const Checked = {
+    args: {
+        checked: true,
+        id: 'checkedId',
+    },
 };
-Disabled.play = async ({ canvasElement }) => {
-    const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox?.shadowRoot?.querySelector('input');
-    expect(input).toBeDisabled();
+export const Indeterminate = {
+    args: {
+        indeterminate: true,
+        id: 'IndeterminateId',
+    },
 };
-export const Invalid = Template.bind({});
-Invalid.args = {
-    isinvalid: true,
+export const Disabled = {
+    args: {
+        disabled: true,
+        id: 'disabledId',
+    },
 };
-Invalid.play = async ({ canvasElement }) => {
-    const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox?.shadowRoot?.querySelector('input');
-    expect(input).toHaveAttribute('aria-invalid', 'true');
+export const Invalid = {
+    args: {
+        isinvalid: true,
+        id: 'invalidId',
+    },
 };
-export const Required = Template.bind({});
-Required.args = {
-    required: true,
+export const IndeterminateDisabled = {
+    args: {
+        indeterminate: true,
+        disabled: true,
+        id: 'checkedIndeterminateId',
+    },
 };
-Required.play = async ({ canvasElement }) => {
-    const checkbox = canvasElement.querySelector('m-checkbox');
-    const input = checkbox?.shadowRoot?.querySelector('input');
-    expect(input).toHaveAttribute('required');
+export const CheckedDisabled = {
+    args: {
+        checked: true,
+        disabled: true,
+        id: 'checkedDisabledId',
+    },
 };

package/dist/components/checkbox/Checkbox.svelte

@@ -1,55 +1,75 @@
 <svelte:options
   customElement={{
     tag: 'm-checkbox',
+    props: {
+      checked: { reflect: true, type: 'Boolean', attribute: 'checked' },
+    },
     extend: customElementForwardEvents,
   }}
 />
 
 <script lang="ts">
   import { customElementForwardEvents } from '../../utils';
-
+  /**
+   * A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options.
+   */
   interface Props {
-    name: string;
+    /**
+     * A unique identifier for the checkbox, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the checkbox element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The text label displayed next to the checkbox.
+     */
     label?: string;
-    id?: string;
+    /**
+     * The checkbox's checked state.
+     */
     checked?: boolean;
+    /**
+     * Sets the checkbox to an indeterminate state (partially selected).
+     */
     indeterminate?: boolean;
-    disabled?: boolean;
+    /**
+     * If `true`, applies an invalid state to the checkbox.
+     */
     isinvalid?: boolean;
-    required?: boolean;
-    onchange?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
+    /**
+     * If `true`, disables the checkbox, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, indent the checkbox.
+     */
+    indented?: boolean;
   }
 
-  const uid = $props.id();
   let {
-    name = 'checkbox',
-    id = uid,
+    id,
+    name,
     label,
-    indeterminate = false,
-    disabled = false,
-    isinvalid = false,
-    required = false,
     checked = $bindable(false),
-    onchange,
-    onblur,
+    indeterminate,
+    disabled,
+    isinvalid,
+    indented,
   }: Props = $props();
 </script>
 
-<div class="mc-checkbox">
+<div class={['mc-checkbox', indented && 'mc-checkbox--indented']}>
   <input
     {id}
     type="checkbox"
-    class="mc-checkbox__input"
-    class:is-invalid={isinvalid}
+    class={['mc-checkbox__input', isinvalid && 'is-invalid']}
     aria-invalid={isinvalid}
     {name}
     {disabled}
     {indeterminate}
-    {required}
     bind:checked
-    {onchange}
-    {onblur}
   />
   {#if label}
     <label for={id} class="mc-checkbox__label">{label}</label>

package/dist/components/checkbox/Checkbox.svelte.d.ts

@@ -1,14 +1,39 @@
+/**
+ * A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options.
+ */
 interface Props {
-    name: string;
+    /**
+     * A unique identifier for the checkbox, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the checkbox element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The text label displayed next to the checkbox.
+     */
     label?: string;
-    id?: string;
+    /**
+     * The checkbox's checked state.
+     */
     checked?: boolean;
+    /**
+     * Sets the checkbox to an indeterminate state (partially selected).
+     */
     indeterminate?: boolean;
-    disabled?: boolean;
+    /**
+     * If `true`, applies an invalid state to the checkbox.
+     */
     isinvalid?: boolean;
-    required?: boolean;
-    onchange?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
+    /**
+     * If `true`, disables the checkbox, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, indent the checkbox.
+     */
+    indented?: boolean;
 }
 declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;