@cloud-ru/ds-toggles 1.1.4 → 1.1.5-preview-a2208aeb.0

package/src/components/Checkbox/styles.module.scss

@@ -65,7 +65,7 @@ $sizes: 'xs', 's';
         $outlineWidth: base.$sn-primitive-strokeWeight-strokeSemiBold;
 
         outline: $outlineWidth solid base.$sn-theme-color-available-complementary;
-        outline-offset: $outlineWidth;
+        outline-offset: var(--focus-offset);
       }
     }
   }
@@ -115,6 +115,13 @@ $sizes: 'xs', 's';
       }
 
       .framing {
+
+        // Кольцо фокуса по границе контейнера (Figma `focusedFrame/regular/outside`).
+        $containerWidth: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'container', 'min-width');
+        $framingWidth: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'min-width');
+
+        --focus-offset: calc((#{$containerWidth} - #{$framingWidth}) / 2);
+
         width: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'min-width');
         height: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'min-height');
 
@@ -122,6 +129,13 @@ $sizes: 'xs', 's';
         @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing');
       }
 
+      // Размер спиннера — токен toggles, а не `density.icon.*` из @cloud-ru/ds-loader; по макету шире рамки, не ужимается.
+      .spinner {
+        flex-shrink: 0;
+        width: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'flag', 'surface', 'loaderSpinner', 'width');
+        height: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'flag', 'surface', 'loaderSpinner', 'height');
+      }
+
       .flag {
         @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'flag');
       }

package/src/components/Favourite/Favourite.tsx

@@ -34,7 +34,7 @@ function Icon({
   disabled,
 }: Required<Pick<FavouriteProps, 'checked' | 'loading' | 'size' | 'disabled'>> & { variant: FavouriteIcon }) {
   if (loading) {
-    return <Spinner size={SPINNER_SIZE_MAP[size]} />;
+    return <Spinner size={SPINNER_SIZE_MAP[size]} className={styles.spinner} />;
   }
 
   const iconSize = getIconSize(size);

package/src/components/Favourite/styles.module.scss

@@ -96,10 +96,24 @@ $sizes: 'xs', 's';
       }
 
       .framing {
-        @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing');
+
+        // Кольцо фокуса по границе контейнера (Figma `focusedFrame/regular/outside`).
+        $containerWidth: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'container', 'min-width');
+        $framingWidth: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'min-width');
+
+        --focus-offset: calc((#{$containerWidth} - #{$framingWidth}) / 2);
 
         width: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'min-width');
         height: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'min-height');
+
+        @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing');
+      }
+
+      // Размер спиннера — токен toggles, а не `density.icon.*` из @cloud-ru/ds-loader; по макету шире рамки, не ужимается.
+      .spinner {
+        flex-shrink: 0;
+        width: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'flag', 'surface', 'loaderSpinner', 'width');
+        height: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'flag', 'surface', 'loaderSpinner', 'height');
       }
 
       .flag {
@@ -132,7 +146,7 @@ $sizes: 'xs', 's';
   &[data-focusvisible='true'] {
     .framing {
       outline: base.$sn-primitive-strokeWeight-strokeSemiBold solid base.$sn-theme-color-available-complementary;
-      outline-offset: base.$sn-primitive-strokeWeight-strokeSemiBold;
+      outline-offset: var(--focus-offset);
     }
   }
 }

package/src/components/Radio/Radio.tsx

@@ -51,7 +51,7 @@ export function Radio({
           <div className={styles.backgroundStateLayer} data-state='emptyNeutralOnBackground' />
           <div className={styles.flag}>
             {loading ? (
-              <Spinner size={SPINNER_SIZE_MAP[size]} />
+              <Spinner size={SPINNER_SIZE_MAP[size]} className={styles.spinner} />
             ) : (
               <div className={styles.surface} {...stateDataAttributes} data-text-opacity={checked || undefined} />
             )}

package/src/components/Radio/styles.module.scss

@@ -57,7 +57,7 @@ $sizes: 'xs', 's';
         $outlineWidth: base.$sn-primitive-strokeWeight-strokeSemiBold;
 
         outline: $outlineWidth solid base.$sn-theme-color-available-complementary;
-        outline-offset: $outlineWidth;
+        outline-offset: var(--focus-offset);
       }
     }
   }
@@ -112,6 +112,13 @@ $sizes: 'xs', 's';
       }
 
       .framing {
+
+        // Кольцо фокуса по границе контейнера (Figma `focusedFrame/regular/outside`).
+        $containerWidth: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'radio', 'container', 'min-width');
+        $framingWidth: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'radio', 'framing', 'min-width');
+
+        --focus-offset: calc((#{$containerWidth} - #{$framingWidth}) / 2);
+
         width: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'radio', 'framing', 'min-width');
         height: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'radio', 'framing', 'min-height');
 
@@ -119,6 +126,13 @@ $sizes: 'xs', 's';
         @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'radio', 'framing');
       }
 
+      // Размер спиннера — токен toggles, а не `density.icon.*` из @cloud-ru/ds-loader; по макету шире рамки, не ужимается.
+      .spinner {
+        flex-shrink: 0;
+        width: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'radio', 'framing', 'flag', 'surface', 'loaderSpinner', 'width');
+        height: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'radio', 'framing', 'flag', 'surface', 'loaderSpinner', 'height');
+      }
+
       .flag {
         @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'radio', 'framing', 'flag')
       }

package/src/components/Switch/styles.module.scss

@@ -7,8 +7,7 @@ $switchAnimationDuration: 0.1s;
 $iconRevealEasing: cubic-bezier(0.33, 1, 0.68, 1);
 
 .spinner {
-  // По макету спиннер шире ползунка (24 на surface 16) и выходит за его границы,
-  // поэтому flex-контейнер не должен его ужимать.
+  // Спиннер шире ползунка и выходит за его границы — flex-контейнер не должен его ужимать.
   flex-shrink: 0;
 }
 
@@ -191,6 +190,12 @@ $iconRevealEasing: cubic-bezier(0.33, 1, 0.68, 1);
         @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'switch', 'framing', 'flag');
       }
 
+      // Размер спиннера — токен toggles, а не `density.icon.*` из @cloud-ru/ds-loader.
+      .spinner {
+        width: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'switch', 'framing', 'flag', 'surface', 'loaderSpinner', 'width');
+        height: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'switch', 'framing', 'flag', 'surface', 'loaderSpinner', 'height');
+      }
+
       .framing[data-checked="true"] .flag {
         $flagTrackWidth: base.simple-var(
           toggles.$toggles,
@@ -208,13 +213,9 @@ $iconRevealEasing: cubic-bezier(0.33, 1, 0.68, 1);
 
       &[data-focusvisible="true"] {
         .container {
-          // Real offset
+          // Кольцо фокуса по границе контейнера (Figma `focusedFrame/regular/outside`).
           $offsetWidth: base.$sn-primitive-strokeWeight-strokeSemiBold;
 
-          @if ($size == 'xs') {
-            outline-offset: $offsetWidth;
-          }
-
           border-radius: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'switch', 'framing', 'border-radius');
           outline: $offsetWidth solid base.$sn-theme-color-available-complementary;
         }