@cloud-ru/ds-toggles 1.1.5-preview-d50a3da1.0 → 1.1.5-preview-e30f4f90.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: var(--focus-offset);
+        outline-offset: $outlineWidth;
       }
     }
   }
@@ -115,13 +115,6 @@ $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');
 
@@ -129,13 +122,6 @@ $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]} className={styles.spinner} />;
+    return <Spinner size={SPINNER_SIZE_MAP[size]} />;
   }
 
   const iconSize = getIconSize(size);

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

@@ -96,24 +96,10 @@ $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);
+        @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing');
 
         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 {
@@ -146,7 +132,7 @@ $sizes: 'xs', 's';
   &[data-focusvisible='true'] {
     .framing {
       outline: base.$sn-primitive-strokeWeight-strokeSemiBold solid base.$sn-theme-color-available-complementary;
-      outline-offset: var(--focus-offset);
+      outline-offset: base.$sn-primitive-strokeWeight-strokeSemiBold;
     }
   }
 }

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]} className={styles.spinner} />
+              <Spinner size={SPINNER_SIZE_MAP[size]} />
             ) : (
               <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: var(--focus-offset);
+        outline-offset: $outlineWidth;
       }
     }
   }
@@ -112,13 +112,6 @@ $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');
 
@@ -126,13 +119,6 @@ $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,7 +7,8 @@ $switchAnimationDuration: 0.1s;
 $iconRevealEasing: cubic-bezier(0.33, 1, 0.68, 1);
 
 .spinner {
-  // Спиннер шире ползунка и выходит за его границы — flex-контейнер не должен его ужимать.
+  // По макету спиннер шире ползунка (24 на surface 16) и выходит за его границы,
+  // поэтому flex-контейнер не должен его ужимать.
   flex-shrink: 0;
 }
 
@@ -190,12 +191,6 @@ $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,
@@ -213,9 +208,13 @@ $iconRevealEasing: cubic-bezier(0.33, 1, 0.68, 1);
 
       &[data-focusvisible="true"] {
         .container {
-          // Кольцо фокуса по границе контейнера (Figma `focusedFrame/regular/outside`).
+          // Real offset
           $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;
         }

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -1,5 +1,5 @@
 import { useUncontrolledProp } from '@cloud-ru/ds-utils';
-import { PropsWithChildren, useCallback } from 'react';
+import { PropsWithChildren, useCallback, useMemo } from 'react';
 
 import { SELECTION_MODE } from '../../constants';
 import { ToggleGroupContext } from '../../context';
@@ -65,7 +65,9 @@ export function ToggleGroup({
     [selectionMode, setValue],
   );
 
-  return (
-    <ToggleGroupContext.Provider value={{ value, onChange, selectionMode }}>{children}</ToggleGroupContext.Provider>
-  );
+  // Значение провайдера стабильно, пока не меняется состояние: иначе каждый рендер группы
+  // перерисовывает всех потребителей контекста (например, все блоки аккордеона).
+  const contextValue = useMemo(() => ({ value, onChange, selectionMode }), [value, onChange, selectionMode]);
+
+  return <ToggleGroupContext.Provider value={contextValue}>{children}</ToggleGroupContext.Provider>;
 }