@simai-studio/ui 5.20261019.2041 → 5.20261020.1647

package/distr/core/js/core-rules.js

@@ -94,7 +94,12 @@ SF.RuleLoader['buttons'] = {
   regex: /class\s*=\s*["'][^"']*\bsf-button\b/i,
   type: 'component',
   css: true,
-  js: true
+  js: true,
+  // The spinner a loading button shows, fetched after the page is ready.
+  relation: [{
+    name: 'spinner',
+    lazy: true
+  }]
 };
 
 /***/ },
@@ -367,7 +372,12 @@ SF.RuleLoader['icon-buttons'] = {
   regex: /class\s*=\s*["'][^"']*\bsf-icon-button\b/i,
   type: 'component',
   css: true,
-  js: true
+  js: true,
+  // The spinner a loading button shows, fetched after the page is ready.
+  relation: [{
+    name: 'spinner',
+    lazy: true
+  }]
 };
 
 /***/ },
@@ -451,6 +461,11 @@ SF.RuleLoader['modal'] = {
     name: 'icon-buttons'
   }, {
     name: 'close'
+  }, // The spinner a modal shows while its content loads, fetched after the
+  // page is ready; the modal sheet draws its slot.
+  {
+    name: 'spinner',
+    lazy: true
   }]
 };
 
@@ -3501,12 +3516,16 @@ SF.RuleLoader['cl-button-group'] = {
   type: 'smart',
   mode: 'smart',
   js: true,
+  // spinner: a loading item shows it, fetched after the page is ready.
   relation: [{
     name: 'button-group'
   }, {
     name: 'cl-buttons'
   }, {
     name: 'cl-icons'
+  }, {
+    name: 'spinner',
+    lazy: true
   }]
 };
 
@@ -3528,6 +3547,11 @@ SF.RuleLoader['cl-buttons'] = {
     name: 'text-align/default'
   }, {
     name: 'cl-icons'
+  }, // The spinner a loading button shows: its slot is drawn by the button sheet,
+  // the motion by the spinner's, fetched after the page is ready.
+  {
+    name: 'spinner',
+    lazy: true
   }]
 };
 
@@ -3862,6 +3886,10 @@ SF.RuleLoader['cl-icon-buttons'] = {
     name: 'cl-close'
   }, {
     name: 'pointer-events/default'
+  }, // The spinner a loading icon button shows, fetched after the page is ready.
+  {
+    name: 'spinner',
+    lazy: true
   }]
 };
 
@@ -3945,10 +3973,14 @@ SF.RuleLoader['cl-modal'] = {
   type: 'smart',
   mode: 'smart',
   js: true,
+  // spinner: the remote content's loading state shows it, fetched after the page is ready.
   relation: [{
     name: 'modal'
   }, {
     name: 'icon-buttons'
+  }, {
+    name: 'spinner',
+    lazy: true
   }]
 };