vision-accessibility 1.0.1 → 1.0.3

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";._accessibilityToggle_kpjm6_9{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #dee2e6}._toggleContainer_kpjm6_15{display:flex;flex-direction:column;gap:8px}._toggleLabel_kpjm6_21{display:flex;align-items:center;gap:16px;cursor:pointer;padding:16px;border:2px solid #007bff;border-radius:8px;transition:all .2s ease;background:#f8f9ff}._toggleLabel_kpjm6_21:hover{background:#e3f2fd;border-color:#0056b3}._toggleLabel_kpjm6_21:focus-within{background:#e3f2fd;border-color:#0056b3;box-shadow:0 0 0 3px #007bff40}._toggleInput_kpjm6_42{position:absolute;opacity:0;width:0;height:0;margin:0}._toggleInput_kpjm6_42:focus+._toggleSlider_kpjm6_49{box-shadow:0 0 0 3px #007bff40}._toggleInput_kpjm6_42:checked+._toggleSlider_kpjm6_49{background:#28a745}._toggleInput_kpjm6_42:checked+._toggleSlider_kpjm6_49 ._toggleThumb_kpjm6_55{transform:translate(28px)}._toggleSlider_kpjm6_49{position:relative;width:56px;height:28px;background:#ced4da;border-radius:14px;transition:all .3s ease;flex-shrink:0}._toggleThumb_kpjm6_55{position:absolute;top:2px;left:2px;width:24px;height:24px;background:#fff;border-radius:50%;transition:transform .3s ease;box-shadow:0 2px 6px #0000004d}._toggleContent_kpjm6_81{flex:1;display:flex;flex-direction:column;gap:4px}._toggleTitle_kpjm6_88{font-size:16px;font-weight:600;color:#343a40;line-height:1.3}._toggleStatus_kpjm6_95{font-size:14px;font-weight:500;color:#007bff;line-height:1.2}._description_kpjm6_102{font-size:13px;color:#6c757d;line-height:1.4;margin:0;padding:0 16px}._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110{border-bottom-color:#fff!important}._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110 ._toggleLabel_kpjm6_21{background:#000!important;border-color:#fff!important;color:#fff!important}._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110 ._toggleLabel_kpjm6_21:hover,._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110 ._toggleLabel_kpjm6_21:focus-within{background:#343a40!important;border-color:#ff0!important}._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110 ._toggleTitle_kpjm6_88{color:#fff!important}._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110 ._toggleStatus_kpjm6_95{color:#ff0!important}._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110 ._description_kpjm6_102{color:#ced4da!important}._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110 ._toggleSlider_kpjm6_49{background:#6c757d!important;border:2px solid #ffffff!important}._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110 ._toggleInput_kpjm6_42:checked+._toggleSlider_kpjm6_49{background:#ff0!important}._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110 ._toggleInput_kpjm6_42:checked+._toggleSlider_kpjm6_49 ._toggleThumb_kpjm6_55{background:#000!important;border:2px solid #ffffff!important}._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110 ._toggleThumb_kpjm6_55{background:#fff!important;border:2px solid #000000!important}._colorSchemeControl_1kr72_9{margin-bottom:16px}._colorSchemeControl_1kr72_9._disabled_1kr72_12 ._title_1kr72_12{opacity:.6}._title_1kr72_12{font-size:14px;font-weight:600;margin:0 0 12px;color:#343a40}._optionsContainer_1kr72_23{display:flex;flex-direction:column;gap:8px}._option_1kr72_23{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:12px;border:1px solid #dee2e6;border-radius:6px;transition:all .2s ease;position:relative;background:#fff}._option_1kr72_23:hover{background:#f8f9fa;border-color:#007bff}._option_1kr72_23:focus-within{background:#f8f9fa;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}._option_1kr72_23._selected_1kr72_50{background:#e3f2fd;border-color:#007bff}._option_1kr72_23._selected_1kr72_50 ._radioIndicator_1kr72_54{background:#007bff;border-color:#007bff}._option_1kr72_23._selected_1kr72_50 ._radioIndicator_1kr72_54:after{opacity:1;transform:scale(1)}._option_1kr72_23._optionDisabled_1kr72_62{opacity:.5;cursor:not-allowed;pointer-events:none}._option_1kr72_23._optionDisabled_1kr72_62:hover{background:#fff;border-color:#dee2e6}._radioInput_1kr72_72{position:absolute;opacity:0;width:0;height:0;margin:0}._radioInput_1kr72_72:focus+._optionContent_1kr72_79{outline:2px solid #007bff;outline-offset:2px}._optionContent_1kr72_79{flex:1;display:flex;flex-direction:column;gap:4px}._optionLabel_1kr72_91{font-size:14px;font-weight:500;color:#343a40;line-height:1.4}._optionDescription_1kr72_98{font-size:12px;color:#6c757d;line-height:1.3}._radioIndicator_1kr72_54{width:18px;height:18px;border:2px solid #ced4da;border-radius:50%;background:#fff;transition:all .2s ease;position:relative;flex-shrink:0;margin-top:1px}._radioIndicator_1kr72_54:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;background:#fff;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:all .2s ease;opacity:0}._colorSchemeControl_1kr72_9._highContrastMode_1kr72_129 ._title_1kr72_12{color:#fff!important}._colorSchemeControl_1kr72_9._highContrastMode_1kr72_129 ._option_1kr72_23{background:#000!important;border-color:#fff!important;color:#fff!important}._colorSchemeControl_1kr72_9._highContrastMode_1kr72_129 ._option_1kr72_23:hover,._colorSchemeControl_1kr72_9._highContrastMode_1kr72_129 ._option_1kr72_23:focus-within{background:#343a40!important}._colorSchemeControl_1kr72_9._highContrastMode_1kr72_129 ._option_1kr72_23._selected_1kr72_50{background:#343a40!important}._colorSchemeControl_1kr72_9._highContrastMode_1kr72_129 ._optionLabel_1kr72_91{color:#fff!important}._colorSchemeControl_1kr72_9._highContrastMode_1kr72_129 ._optionDescription_1kr72_98{color:#ced4da!important}._colorSchemeControl_1kr72_9._highContrastMode_1kr72_129 ._radioIndicator_1kr72_54{border-color:#fff!important;background:#000!important}._colorSchemeControl_1kr72_9._highContrastMode_1kr72_129 ._radioIndicator_1kr72_54:after{background:#fff!important}._fontSizeControl_1c68l_9{margin-bottom:16px}._fontSizeControl_1c68l_9._disabled_1c68l_12 ._title_1c68l_12{opacity:.6}._title_1c68l_12{font-size:14px;font-weight:600;margin:0 0 12px;color:#343a40}._optionsContainer_1c68l_23{display:flex;flex-direction:column;gap:8px}._option_1c68l_23{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:12px;border:1px solid #dee2e6;border-radius:6px;transition:all .2s ease;position:relative;background:#fff}._option_1c68l_23:hover{background:#f8f9fa;border-color:#007bff}._option_1c68l_23:focus-within{background:#f8f9fa;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}._option_1c68l_23._selected_1c68l_50{background:#e3f2fd;border-color:#007bff}._option_1c68l_23._selected_1c68l_50 ._radioIndicator_1c68l_54{background:#007bff;border-color:#007bff}._option_1c68l_23._selected_1c68l_50 ._radioIndicator_1c68l_54:after{opacity:1;transform:scale(1)}._option_1c68l_23._optionDisabled_1c68l_62{opacity:.5;cursor:not-allowed;pointer-events:none}._option_1c68l_23._optionDisabled_1c68l_62:hover{background:#fff;border-color:#dee2e6}._radioInput_1c68l_72{position:absolute;opacity:0;width:0;height:0;margin:0}._radioInput_1c68l_72:focus+._optionContent_1c68l_79{outline:2px solid #007bff;outline-offset:2px}._optionContent_1c68l_79{flex:1;display:flex;flex-direction:column;gap:4px}._optionLabel_1c68l_91{font-size:14px;font-weight:500;color:#343a40;line-height:1.4}._optionDescription_1c68l_98{font-size:12px;color:#6c757d;line-height:1.3}._radioIndicator_1c68l_54{width:18px;height:18px;border:2px solid #ced4da;border-radius:50%;background:#fff;transition:all .2s ease;position:relative;flex-shrink:0;margin-top:1px}._radioIndicator_1c68l_54:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;background:#fff;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:all .2s ease;opacity:0}._fontSizeControl_1c68l_9._highContrastMode_1c68l_129 ._title_1c68l_12{color:#fff!important}._fontSizeControl_1c68l_9._highContrastMode_1c68l_129 ._option_1c68l_23{background:#000!important;border-color:#fff!important;color:#fff!important}._fontSizeControl_1c68l_9._highContrastMode_1c68l_129 ._option_1c68l_23:hover,._fontSizeControl_1c68l_9._highContrastMode_1c68l_129 ._option_1c68l_23:focus-within{background:#343a40!important}._fontSizeControl_1c68l_9._highContrastMode_1c68l_129 ._option_1c68l_23._selected_1c68l_50{background:#343a40!important}._fontSizeControl_1c68l_9._highContrastMode_1c68l_129 ._optionLabel_1c68l_91{color:#fff!important}._fontSizeControl_1c68l_9._highContrastMode_1c68l_129 ._optionDescription_1c68l_98{color:#ced4da!important}._fontSizeControl_1c68l_9._highContrastMode_1c68l_129 ._radioIndicator_1c68l_54{border-color:#fff!important;background:#000!important}._fontSizeControl_1c68l_9._highContrastMode_1c68l_129 ._radioIndicator_1c68l_54:after{background:#fff!important}._imageControl_hkxkm_9{margin-bottom:16px}._imageControl_hkxkm_9._disabled_hkxkm_12 ._title_hkxkm_12{opacity:.6}._title_hkxkm_12{font-size:14px;font-weight:600;margin:0 0 12px;color:#343a40}._switchContainer_hkxkm_23{display:flex;flex-direction:column;gap:8px}._switchLabel_hkxkm_29{display:flex;align-items:center;gap:12px;cursor:pointer;padding:12px;border:1px solid #dee2e6;border-radius:6px;transition:all .2s ease;background:#fff}._switchLabel_hkxkm_29:hover{background:#f8f9fa;border-color:#007bff}._switchLabel_hkxkm_29:focus-within{background:#f8f9fa;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}._switchLabel_hkxkm_29._switchDisabled_hkxkm_49{opacity:.5;cursor:not-allowed;pointer-events:none}._switchLabel_hkxkm_29._switchDisabled_hkxkm_49:hover{background:#fff;border-color:#dee2e6}._switchInput_hkxkm_59{position:absolute;opacity:0;width:0;height:0;margin:0}._switchInput_hkxkm_59:focus+._switchSlider_hkxkm_66{box-shadow:0 0 0 2px #007bff40}._switchInput_hkxkm_59:checked+._switchSlider_hkxkm_66{background:#007bff}._switchInput_hkxkm_59:checked+._switchSlider_hkxkm_66 ._switchThumb_hkxkm_72{transform:translate(20px)}._switchSlider_hkxkm_66{position:relative;width:44px;height:24px;background:#ced4da;border-radius:12px;transition:all .2s ease;flex-shrink:0}._switchThumb_hkxkm_72{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s ease;box-shadow:0 2px 4px #0003}._switchText_hkxkm_98{font-size:14px;font-weight:500;color:#343a40;line-height:1.4;flex:1}._description_hkxkm_106{font-size:12px;color:#6c757d;line-height:1.3;margin:0;padding-left:56px}._imageControl_hkxkm_9._highContrastMode_hkxkm_114 ._title_hkxkm_12{color:#fff!important}._imageControl_hkxkm_9._highContrastMode_hkxkm_114 ._switchLabel_hkxkm_29{background:#000!important;border-color:#fff!important;color:#fff!important}._imageControl_hkxkm_9._highContrastMode_hkxkm_114 ._switchLabel_hkxkm_29:hover,._imageControl_hkxkm_9._highContrastMode_hkxkm_114 ._switchLabel_hkxkm_29:focus-within{background:#343a40!important}._imageControl_hkxkm_9._highContrastMode_hkxkm_114 ._switchText_hkxkm_98{color:#fff!important}._imageControl_hkxkm_9._highContrastMode_hkxkm_114 ._description_hkxkm_106{color:#ced4da!important}._imageControl_hkxkm_9._highContrastMode_hkxkm_114 ._switchSlider_hkxkm_66{background:#6c757d!important;border:1px solid #ffffff!important}._imageControl_hkxkm_9._highContrastMode_hkxkm_114 ._switchInput_hkxkm_59:checked+._switchSlider_hkxkm_66{background:#fff!important}._imageControl_hkxkm_9._highContrastMode_hkxkm_114 ._switchInput_hkxkm_59:checked+._switchSlider_hkxkm_66 ._switchThumb_hkxkm_72{background:#000!important}._imageControl_hkxkm_9._highContrastMode_hkxkm_114 ._switchThumb_hkxkm_72{background:#fff!important;border:1px solid #000000!important}._stickyContainer_lzoik_9{position:fixed;top:70px;right:0;left:0;pointer-events:none;z-index:1000}@media (max-width: 767px){._stickyContainer_lzoik_9{top:60px}}._panel_lzoik_23{position:sticky;top:20px;width:360px;max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);background:#fff;border:1px solid #dee2e6;border-radius:12px;box-shadow:0 8px 32px #0000001f;overflow:hidden;display:flex;flex-direction:column;pointer-events:auto}._panel_lzoik_23._top-right_lzoik_38{margin-left:auto;margin-right:20px}._panel_lzoik_23._top-left_lzoik_42{margin-left:20px;margin-right:auto}._panel_lzoik_23._bottom-right_lzoik_46{margin-left:auto;margin-right:20px;position:fixed;top:auto;bottom:20px;width:360px}._panel_lzoik_23._bottom-left_lzoik_54{margin-left:20px;margin-right:auto;position:fixed;top:auto;bottom:20px;width:360px}@media (max-width: 767px){._panel_lzoik_23{width:calc(100vw - 32px);max-height:calc(100vh - 100px);margin-left:16px;margin-right:16px}._panel_lzoik_23._top-right_lzoik_38,._panel_lzoik_23._top-left_lzoik_42,._panel_lzoik_23._bottom-right_lzoik_46,._panel_lzoik_23._bottom-left_lzoik_54{margin-left:16px;margin-right:16px}}._header_lzoik_75{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #e9ecef;background:#f8f9fa}._title_lzoik_84{margin:0;font-size:18px;font-weight:600;color:#343a40;line-height:1.3}._closeButton_lzoik_92{background:none;border:none;font-size:24px;font-weight:300;color:#6c757d;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s ease;line-height:1;width:32px;height:32px;display:flex;align-items:center;justify-content:center}._closeButton_lzoik_92:hover{background:#e9ecef;color:#343a40}._closeButton_lzoik_92:focus{outline:2px solid #007bff;outline-offset:2px;background:#e9ecef;color:#343a40}._closeButton_lzoik_92:active{background:#dee2e6}._description_lzoik_123{padding:16px 24px 0;font-size:14px;color:#6c757d;line-height:1.4;margin:0}._content_lzoik_131{flex:1;padding:20px 24px 24px;overflow-y:auto}._content_lzoik_131::-webkit-scrollbar{width:6px}._content_lzoik_131::-webkit-scrollbar-track{background:#e9ecef;border-radius:3px}._content_lzoik_131::-webkit-scrollbar-thumb{background:#ced4da;border-radius:3px}._content_lzoik_131::-webkit-scrollbar-thumb:hover{background:#adb5bd}._controls_lzoik_151{display:flex;flex-direction:column;gap:4px}._panel_lzoik_23._highContrastMode_lzoik_157{background:#000!important;border-color:#fff!important;color:#fff!important}._panel_lzoik_23._highContrastMode_lzoik_157 ._header_lzoik_75{background:#000!important;border-bottom-color:#fff!important}._panel_lzoik_23._highContrastMode_lzoik_157 ._title_lzoik_84{color:#fff!important}._panel_lzoik_23._highContrastMode_lzoik_157 ._closeButton_lzoik_92{color:#fff!important;border:1px solid #ffffff!important}._panel_lzoik_23._highContrastMode_lzoik_157 ._closeButton_lzoik_92:hover,._panel_lzoik_23._highContrastMode_lzoik_157 ._closeButton_lzoik_92:focus{background:#343a40!important;color:#ff0!important}._panel_lzoik_23._highContrastMode_lzoik_157 ._closeButton_lzoik_92:active{background:#6c757d!important}._panel_lzoik_23._highContrastMode_lzoik_157 ._description_lzoik_123{color:#ced4da!important}._panel_lzoik_23._highContrastMode_lzoik_157 ._content_lzoik_131::-webkit-scrollbar-track{background:#343a40!important}._panel_lzoik_23._highContrastMode_lzoik_157 ._content_lzoik_131::-webkit-scrollbar-thumb{background:#6c757d!important}._panel_lzoik_23._highContrastMode_lzoik_157 ._content_lzoik_131::-webkit-scrollbar-thumb:hover{background:#adb5bd!important}@keyframes _slideIn_lzoik_1{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}._panel_lzoik_23{animation:_slideIn_lzoik_1 .2s ease}
+@charset "UTF-8";._accessibilityToggle_kpjm6_9{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #dee2e6}._toggleContainer_kpjm6_15{display:flex;flex-direction:column;gap:8px}._toggleLabel_kpjm6_21{display:flex;align-items:center;gap:16px;cursor:pointer;padding:16px;border:2px solid #007bff;border-radius:8px;transition:all .2s ease;background:#f8f9ff}._toggleLabel_kpjm6_21:hover{background:#e3f2fd;border-color:#0056b3}._toggleLabel_kpjm6_21:focus-within{background:#e3f2fd;border-color:#0056b3;box-shadow:0 0 0 3px #007bff40}._toggleInput_kpjm6_42{position:absolute;opacity:0;width:0;height:0;margin:0}._toggleInput_kpjm6_42:focus+._toggleSlider_kpjm6_49{box-shadow:0 0 0 3px #007bff40}._toggleInput_kpjm6_42:checked+._toggleSlider_kpjm6_49{background:#28a745}._toggleInput_kpjm6_42:checked+._toggleSlider_kpjm6_49 ._toggleThumb_kpjm6_55{transform:translate(28px)}._toggleSlider_kpjm6_49{position:relative;width:56px;height:28px;background:#ced4da;border-radius:14px;transition:all .3s ease;flex-shrink:0}._toggleThumb_kpjm6_55{position:absolute;top:2px;left:2px;width:24px;height:24px;background:#fff;border-radius:50%;transition:transform .3s ease;box-shadow:0 2px 6px #0000004d}._toggleContent_kpjm6_81{flex:1;display:flex;flex-direction:column;gap:4px}._toggleTitle_kpjm6_88{font-size:16px;font-weight:600;color:#343a40;line-height:1.3}._toggleStatus_kpjm6_95{font-size:14px;font-weight:500;color:#007bff;line-height:1.2}._description_kpjm6_102{font-size:13px;color:#6c757d;line-height:1.4;margin:0;padding:0 16px}._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110{border-bottom-color:#fff!important}._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110 ._toggleLabel_kpjm6_21{background:#000!important;border-color:#fff!important;color:#fff!important}._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110 ._toggleLabel_kpjm6_21:hover,._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110 ._toggleLabel_kpjm6_21:focus-within{background:#343a40!important;border-color:#ff0!important}._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110 ._toggleTitle_kpjm6_88{color:#fff!important}._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110 ._toggleStatus_kpjm6_95{color:#ff0!important}._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110 ._description_kpjm6_102{color:#ced4da!important}._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110 ._toggleSlider_kpjm6_49{background:#6c757d!important;border:2px solid #ffffff!important}._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110 ._toggleInput_kpjm6_42:checked+._toggleSlider_kpjm6_49{background:#ff0!important}._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110 ._toggleInput_kpjm6_42:checked+._toggleSlider_kpjm6_49 ._toggleThumb_kpjm6_55{background:#000!important;border:2px solid #ffffff!important}._accessibilityToggle_kpjm6_9._highContrastMode_kpjm6_110 ._toggleThumb_kpjm6_55{background:#fff!important;border:2px solid #000000!important}._colorSchemeControl_1kr72_9{margin-bottom:16px}._colorSchemeControl_1kr72_9._disabled_1kr72_12 ._title_1kr72_12{opacity:.6}._title_1kr72_12{font-size:14px;font-weight:600;margin:0 0 12px;color:#343a40}._optionsContainer_1kr72_23{display:flex;flex-direction:column;gap:8px}._option_1kr72_23{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:12px;border:1px solid #dee2e6;border-radius:6px;transition:all .2s ease;position:relative;background:#fff}._option_1kr72_23:hover{background:#f8f9fa;border-color:#007bff}._option_1kr72_23:focus-within{background:#f8f9fa;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}._option_1kr72_23._selected_1kr72_50{background:#e3f2fd;border-color:#007bff}._option_1kr72_23._selected_1kr72_50 ._radioIndicator_1kr72_54{background:#007bff;border-color:#007bff}._option_1kr72_23._selected_1kr72_50 ._radioIndicator_1kr72_54:after{opacity:1;transform:scale(1)}._option_1kr72_23._optionDisabled_1kr72_62{opacity:.5;cursor:not-allowed;pointer-events:none}._option_1kr72_23._optionDisabled_1kr72_62:hover{background:#fff;border-color:#dee2e6}._radioInput_1kr72_72{position:absolute;opacity:0;width:0;height:0;margin:0}._radioInput_1kr72_72:focus+._optionContent_1kr72_79{outline:2px solid #007bff;outline-offset:2px}._optionContent_1kr72_79{flex:1;display:flex;flex-direction:column;gap:4px}._optionLabel_1kr72_91{font-size:14px;font-weight:500;color:#343a40;line-height:1.4}._optionDescription_1kr72_98{font-size:12px;color:#6c757d;line-height:1.3}._radioIndicator_1kr72_54{width:18px;height:18px;border:2px solid #ced4da;border-radius:50%;background:#fff;transition:all .2s ease;position:relative;flex-shrink:0;margin-top:1px}._radioIndicator_1kr72_54:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;background:#fff;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:all .2s ease;opacity:0}._colorSchemeControl_1kr72_9._highContrastMode_1kr72_129 ._title_1kr72_12{color:#fff!important}._colorSchemeControl_1kr72_9._highContrastMode_1kr72_129 ._option_1kr72_23{background:#000!important;border-color:#fff!important;color:#fff!important}._colorSchemeControl_1kr72_9._highContrastMode_1kr72_129 ._option_1kr72_23:hover,._colorSchemeControl_1kr72_9._highContrastMode_1kr72_129 ._option_1kr72_23:focus-within{background:#343a40!important}._colorSchemeControl_1kr72_9._highContrastMode_1kr72_129 ._option_1kr72_23._selected_1kr72_50{background:#343a40!important}._colorSchemeControl_1kr72_9._highContrastMode_1kr72_129 ._optionLabel_1kr72_91{color:#fff!important}._colorSchemeControl_1kr72_9._highContrastMode_1kr72_129 ._optionDescription_1kr72_98{color:#ced4da!important}._colorSchemeControl_1kr72_9._highContrastMode_1kr72_129 ._radioIndicator_1kr72_54{border-color:#fff!important;background:#000!important}._colorSchemeControl_1kr72_9._highContrastMode_1kr72_129 ._radioIndicator_1kr72_54:after{background:#fff!important}._fontSizeControl_1c68l_9{margin-bottom:16px}._fontSizeControl_1c68l_9._disabled_1c68l_12 ._title_1c68l_12{opacity:.6}._title_1c68l_12{font-size:14px;font-weight:600;margin:0 0 12px;color:#343a40}._optionsContainer_1c68l_23{display:flex;flex-direction:column;gap:8px}._option_1c68l_23{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:12px;border:1px solid #dee2e6;border-radius:6px;transition:all .2s ease;position:relative;background:#fff}._option_1c68l_23:hover{background:#f8f9fa;border-color:#007bff}._option_1c68l_23:focus-within{background:#f8f9fa;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}._option_1c68l_23._selected_1c68l_50{background:#e3f2fd;border-color:#007bff}._option_1c68l_23._selected_1c68l_50 ._radioIndicator_1c68l_54{background:#007bff;border-color:#007bff}._option_1c68l_23._selected_1c68l_50 ._radioIndicator_1c68l_54:after{opacity:1;transform:scale(1)}._option_1c68l_23._optionDisabled_1c68l_62{opacity:.5;cursor:not-allowed;pointer-events:none}._option_1c68l_23._optionDisabled_1c68l_62:hover{background:#fff;border-color:#dee2e6}._radioInput_1c68l_72{position:absolute;opacity:0;width:0;height:0;margin:0}._radioInput_1c68l_72:focus+._optionContent_1c68l_79{outline:2px solid #007bff;outline-offset:2px}._optionContent_1c68l_79{flex:1;display:flex;flex-direction:column;gap:4px}._optionLabel_1c68l_91{font-size:14px;font-weight:500;color:#343a40;line-height:1.4}._optionDescription_1c68l_98{font-size:12px;color:#6c757d;line-height:1.3}._radioIndicator_1c68l_54{width:18px;height:18px;border:2px solid #ced4da;border-radius:50%;background:#fff;transition:all .2s ease;position:relative;flex-shrink:0;margin-top:1px}._radioIndicator_1c68l_54:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;background:#fff;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:all .2s ease;opacity:0}._fontSizeControl_1c68l_9._highContrastMode_1c68l_129 ._title_1c68l_12{color:#fff!important}._fontSizeControl_1c68l_9._highContrastMode_1c68l_129 ._option_1c68l_23{background:#000!important;border-color:#fff!important;color:#fff!important}._fontSizeControl_1c68l_9._highContrastMode_1c68l_129 ._option_1c68l_23:hover,._fontSizeControl_1c68l_9._highContrastMode_1c68l_129 ._option_1c68l_23:focus-within{background:#343a40!important}._fontSizeControl_1c68l_9._highContrastMode_1c68l_129 ._option_1c68l_23._selected_1c68l_50{background:#343a40!important}._fontSizeControl_1c68l_9._highContrastMode_1c68l_129 ._optionLabel_1c68l_91{color:#fff!important}._fontSizeControl_1c68l_9._highContrastMode_1c68l_129 ._optionDescription_1c68l_98{color:#ced4da!important}._fontSizeControl_1c68l_9._highContrastMode_1c68l_129 ._radioIndicator_1c68l_54{border-color:#fff!important;background:#000!important}._fontSizeControl_1c68l_9._highContrastMode_1c68l_129 ._radioIndicator_1c68l_54:after{background:#fff!important}._imageControl_hkxkm_9{margin-bottom:16px}._imageControl_hkxkm_9._disabled_hkxkm_12 ._title_hkxkm_12{opacity:.6}._title_hkxkm_12{font-size:14px;font-weight:600;margin:0 0 12px;color:#343a40}._switchContainer_hkxkm_23{display:flex;flex-direction:column;gap:8px}._switchLabel_hkxkm_29{display:flex;align-items:center;gap:12px;cursor:pointer;padding:12px;border:1px solid #dee2e6;border-radius:6px;transition:all .2s ease;background:#fff}._switchLabel_hkxkm_29:hover{background:#f8f9fa;border-color:#007bff}._switchLabel_hkxkm_29:focus-within{background:#f8f9fa;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}._switchLabel_hkxkm_29._switchDisabled_hkxkm_49{opacity:.5;cursor:not-allowed;pointer-events:none}._switchLabel_hkxkm_29._switchDisabled_hkxkm_49:hover{background:#fff;border-color:#dee2e6}._switchInput_hkxkm_59{position:absolute;opacity:0;width:0;height:0;margin:0}._switchInput_hkxkm_59:focus+._switchSlider_hkxkm_66{box-shadow:0 0 0 2px #007bff40}._switchInput_hkxkm_59:checked+._switchSlider_hkxkm_66{background:#007bff}._switchInput_hkxkm_59:checked+._switchSlider_hkxkm_66 ._switchThumb_hkxkm_72{transform:translate(20px)}._switchSlider_hkxkm_66{position:relative;width:44px;height:24px;background:#ced4da;border-radius:12px;transition:all .2s ease;flex-shrink:0}._switchThumb_hkxkm_72{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s ease;box-shadow:0 2px 4px #0003}._switchText_hkxkm_98{font-size:14px;font-weight:500;color:#343a40;line-height:1.4;flex:1}._description_hkxkm_106{font-size:12px;color:#6c757d;line-height:1.3;margin:0;padding-left:56px}._imageControl_hkxkm_9._highContrastMode_hkxkm_114 ._title_hkxkm_12{color:#fff!important}._imageControl_hkxkm_9._highContrastMode_hkxkm_114 ._switchLabel_hkxkm_29{background:#000!important;border-color:#fff!important;color:#fff!important}._imageControl_hkxkm_9._highContrastMode_hkxkm_114 ._switchLabel_hkxkm_29:hover,._imageControl_hkxkm_9._highContrastMode_hkxkm_114 ._switchLabel_hkxkm_29:focus-within{background:#343a40!important}._imageControl_hkxkm_9._highContrastMode_hkxkm_114 ._switchText_hkxkm_98{color:#fff!important}._imageControl_hkxkm_9._highContrastMode_hkxkm_114 ._description_hkxkm_106{color:#ced4da!important}._imageControl_hkxkm_9._highContrastMode_hkxkm_114 ._switchSlider_hkxkm_66{background:#6c757d!important;border:1px solid #ffffff!important}._imageControl_hkxkm_9._highContrastMode_hkxkm_114 ._switchInput_hkxkm_59:checked+._switchSlider_hkxkm_66{background:#fff!important}._imageControl_hkxkm_9._highContrastMode_hkxkm_114 ._switchInput_hkxkm_59:checked+._switchSlider_hkxkm_66 ._switchThumb_hkxkm_72{background:#000!important}._imageControl_hkxkm_9._highContrastMode_hkxkm_114 ._switchThumb_hkxkm_72{background:#fff!important;border:1px solid #000000!important}[data-accessibility-panel-container] ._stickyContainer_1xq4j_9,._stickyContainer_1xq4j_9{position:fixed;pointer-events:none;z-index:1000;top:70px}[data-accessibility-panel-container] ._stickyContainer_1xq4j_9._top-right_1xq4j_16,._stickyContainer_1xq4j_9._top-right_1xq4j_16{right:20px}[data-accessibility-panel-container] ._stickyContainer_1xq4j_9._top-left_1xq4j_20,._stickyContainer_1xq4j_9._top-left_1xq4j_20{left:20px}@media (max-width: 767px){[data-accessibility-panel-container] ._stickyContainer_1xq4j_9,._stickyContainer_1xq4j_9{top:60px}}._panel_1xq4j_31{position:sticky;top:20px;width:360px;max-width:calc(100vw - 120px);max-height:calc(100vh - 120px);background:#fff;border:1px solid #dee2e6;border-radius:12px;box-shadow:0 8px 32px #0000001f;overflow:hidden;display:flex;flex-direction:column;pointer-events:auto}@media (max-width: 767px){._panel_1xq4j_31{width:calc(100vw - 32px);max-height:calc(100vh - 100px);margin-left:16px;margin-right:16px}._panel_1xq4j_31._top-right_1xq4j_16,._panel_1xq4j_31._top-left_1xq4j_20,._panel_1xq4j_31._bottom-right_1xq4j_53,._panel_1xq4j_31._bottom-left_1xq4j_53{margin-left:16px;margin-right:16px}}._header_1xq4j_59{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #e9ecef;background:#f8f9fa}._title_1xq4j_68{margin:0;font-size:18px;font-weight:600;color:#343a40;line-height:1.3}._closeButton_1xq4j_76{background:none;border:none;font-size:24px;font-weight:300;color:#6c757d;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s ease;line-height:1;width:32px;height:32px;display:flex;align-items:center;justify-content:center}._closeButton_1xq4j_76:hover{background:#e9ecef;color:#343a40}._closeButton_1xq4j_76:focus{outline:2px solid #007bff;outline-offset:2px;background:#e9ecef;color:#343a40}._closeButton_1xq4j_76:active{background:#dee2e6}._description_1xq4j_107{padding:16px 24px 0;font-size:14px;color:#6c757d;line-height:1.4;margin:0}._content_1xq4j_115{flex:1;padding:20px 24px 24px;overflow-y:auto}._content_1xq4j_115::-webkit-scrollbar{width:6px}._content_1xq4j_115::-webkit-scrollbar-track{background:#e9ecef;border-radius:3px}._content_1xq4j_115::-webkit-scrollbar-thumb{background:#ced4da;border-radius:3px}._content_1xq4j_115::-webkit-scrollbar-thumb:hover{background:#adb5bd}._controls_1xq4j_135{display:flex;flex-direction:column;gap:4px}._panel_1xq4j_31._highContrastMode_1xq4j_141{background:#000!important;border-color:#fff!important;color:#fff!important}._panel_1xq4j_31._highContrastMode_1xq4j_141 ._header_1xq4j_59{background:#000!important;border-bottom-color:#fff!important}._panel_1xq4j_31._highContrastMode_1xq4j_141 ._title_1xq4j_68{color:#fff!important}._panel_1xq4j_31._highContrastMode_1xq4j_141 ._closeButton_1xq4j_76{color:#fff!important;border:1px solid #ffffff!important}._panel_1xq4j_31._highContrastMode_1xq4j_141 ._closeButton_1xq4j_76:hover,._panel_1xq4j_31._highContrastMode_1xq4j_141 ._closeButton_1xq4j_76:focus{background:#343a40!important;color:#ff0!important}._panel_1xq4j_31._highContrastMode_1xq4j_141 ._closeButton_1xq4j_76:active{background:#6c757d!important}._panel_1xq4j_31._highContrastMode_1xq4j_141 ._description_1xq4j_107{color:#ced4da!important}._panel_1xq4j_31._highContrastMode_1xq4j_141 ._content_1xq4j_115::-webkit-scrollbar-track{background:#343a40!important}._panel_1xq4j_31._highContrastMode_1xq4j_141 ._content_1xq4j_115::-webkit-scrollbar-thumb{background:#6c757d!important}._panel_1xq4j_31._highContrastMode_1xq4j_141 ._content_1xq4j_115::-webkit-scrollbar-thumb:hover{background:#adb5bd!important}@keyframes _slideIn_1xq4j_1{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}._panel_1xq4j_31{animation:_slideIn_1xq4j_1 .2s ease}._panel_1xq4j_31._grayscaleMode_1xq4j_191,._panel_1xq4j_31._grayscaleMode_1xq4j_191._highContrastMode_1xq4j_141{filter:grayscale(0)!important}

package/dist/types/index.d.ts

@@ -39,7 +39,9 @@ export interface AccessibilityPanelProps {
     /** Обработчик закрытия панели */
     onClose: () => void;
     /** Позиция панели относительно кнопки */
-    position?: 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right';
+    position?: 'top-right' | 'top-left';
+    /** Объект с переводами для настройки локализации */
+    translations?: import('../config/translations').AccessibilityTranslations;
 }
 /**
  * Свойства компонентов управления настройками
@@ -50,6 +52,42 @@ export interface ControlComponentProps {
     /** Обработчик обновления настроек */
     onUpdate: (updates: Partial<AccessibilitySettings>) => void;
 }
+/**
+ * Свойства компонента переключателя режима доступности
+ */
+export interface AccessibilityToggleProps {
+    /** CSS класс для дополнительной стилизации */
+    className?: string;
+    /** Объект с переводами */
+    translations?: Record<string, string>;
+}
+/**
+ * Свойства компонента управления цветовой схемой
+ */
+export interface ColorSchemeControlProps {
+    /** CSS класс для дополнительной стилизации */
+    className?: string;
+    /** Объект с переводами */
+    translations?: Record<string, string>;
+}
+/**
+ * Свойства компонента управления размером шрифта
+ */
+export interface FontSizeControlProps {
+    /** CSS класс для дополнительной стилизации */
+    className?: string;
+    /** Объект с переводами */
+    translations?: Record<string, string>;
+}
+/**
+ * Свойства компонента управления изображениями
+ */
+export interface ImageControlProps {
+    /** CSS класс для дополнительной стилизации */
+    className?: string;
+    /** Объект с переводами */
+    translations?: Record<string, string>;
+}
 /**
  * Настройки по умолчанию
  */

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,eAAe,GAAG,WAAW,CAAC;AACrE,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,oBAAoB;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,gCAAgC;IAChC,UAAU,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,wBAAwB;IACxB,QAAQ,EAAE,qBAAqB,CAAC;IAChC,0BAA0B;IAC1B,cAAc,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;IAClE,8CAA8C;IAC9C,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,6CAA6C;IAC7C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,wBAAwB;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,iCAAiC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,aAAa,GAAG,cAAc,CAAC;CACtE;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,wBAAwB;IACxB,QAAQ,EAAE,qBAAqB,CAAC;IAChC,qCAAqC;IACrC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED;;GAEG;AACH,eAAO,MAAM,8BAA8B,EAAE,qBAK5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,eAAe,GAAG,WAAW,CAAC;AACrE,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,oBAAoB;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,gCAAgC;IAChC,UAAU,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,wBAAwB;IACxB,QAAQ,EAAE,qBAAqB,CAAC;IAChC,0BAA0B;IAC1B,cAAc,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;IAClE,8CAA8C;IAC9C,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,6CAA6C;IAC7C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,wBAAwB;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,iCAAiC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,CAAE;IACrC,oDAAoD;IACpD,YAAY,CAAC,EAAE,OAAO,wBAAwB,EAAE,yBAAyB,CAAC;CAC3E;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,wBAAwB;IACxB,QAAQ,EAAE,qBAAqB,CAAC;IAChC,qCAAqC;IACrC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACvC;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACvC;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACvC;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACvC;AAED;;GAEG;AACH,eAAO,MAAM,8BAA8B,EAAE,qBAK5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,2BAA2B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vision-accessibility",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Универсальный компонент панели доступности для слабовидящих пользователей",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/AccessibilityPanel/AccessibilityPanel.module.scss

@@ -3,13 +3,21 @@
  * Реализует sticky панель с настройками доступности
  */
 
+[data-accessibility-panel-container] .stickyContainer,
 .stickyContainer {
   position: fixed;
-  top: 70px;
-  right: 0;
-  left: 0;
   pointer-events: none;
   z-index: 1000;
+  top: 70px;
+
+
+    &.top-right {
+      right: $spacing-xl;
+    }
+  
+    &.top-left {
+      left: $spacing-xl;
+    }
 
   // Адаптивность для мобильных устройств
   @include respond-down(md) {
@@ -21,8 +29,8 @@
   position: sticky;
   top: 20px;
   width: 360px;
-  max-width: calc(100vw - 40px);
-  max-height: calc(100vh - 40px);
+  max-width: calc(100vw - 120px);
+  max-height: calc(100vh - 120px);
   background: $white;
   border: 1px solid $gray-300;
   border-radius: $border-radius-xl;
@@ -32,34 +40,6 @@
   flex-direction: column;
   pointer-events: auto;
 
-  // Позиционирование панели
-    &.top-right {
-      margin-left: auto;
-      margin-right: $spacing-xl;
-    }
-  
-    &.top-left {
-      margin-left: $spacing-xl;
-      margin-right: auto;
-    }
-    
-    &.bottom-right {
-      margin-left: auto;
-      margin-right: $spacing-xl;
-      position: fixed;
-      top: auto;
-      bottom: $spacing-xl;
-      width: 360px;
-    }
-    
-    &.bottom-left {
-      margin-left: $spacing-xl;
-      margin-right: auto;
-      position: fixed;
-      top: auto;
-      bottom: $spacing-xl;
-      width: 360px;
-    }
 
   // Адаптивность для мобильных устройств
   @include respond-down(md) {
@@ -231,4 +211,13 @@
 
 .panel {
   animation: slideIn $transition-fast;
+}
+
+// Для режима градаций серого нужно отменить фильтр на панели
+.panel.grayscaleMode {
+  filter: grayscale(0) !important;
+
+  &.highContrastMode {
+    filter: grayscale(0) !important;
+  }
 }

package/src/components/AccessibilityPanel/AccessibilityPanel.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { AccessibilityPanel } from "./AccessibilityPanel";
 import { useState } from "react";
+import { AccessibilityTranslations } from "../../config/translations";
 
 const meta = {
   title: "Components/AccessibilityPanel",
@@ -72,6 +73,28 @@ const WithProviderAndControls = (Story: any, context: any) => {
             <li>Это элемент списка 3</li>
           </ul>
         </div>
+         <div style={{ marginTop: '20px' }}>
+          <h2>Еще немного контента</h2>
+          <p>Вот еще несколько абзацев текста для демонстрации изменения размера шрифта:</p>
+          <p>Первый параграф с обычным текстом для проверки работы изменения размера шрифта.</p>
+          <p>Второй параграф содержит немного другой текст, чтобы можно было увидеть эффект от изменения размера шрифта.</p>
+          <ul>
+            <li>Это элемент списка 1</li>
+            <li>Это элемент списка 2</li>
+            <li>Это элемент списка 3</li>
+          </ul>
+        </div>
+         <div style={{ marginTop: '20px' }}>
+          <h2>Еще немного контента</h2>
+          <p>Вот еще несколько абзацев текста для демонстрации изменения размера шрифта:</p>
+          <p>Первый параграф с обычным текстом для проверки работы изменения размера шрифта.</p>
+          <p>Второй параграф содержит немного другой текст, чтобы можно было увидеть эффект от изменения размера шрифта.</p>
+          <ul>
+            <li>Это элемент списка 1</li>
+            <li>Это элемент списка 2</li>
+            <li>Это элемент списка 3</li>
+          </ul>
+        </div>
       </div>
     </div>
   );
@@ -86,20 +109,37 @@ export const Default: Story = {
   decorators: [WithProviderAndControls],
 };
 
-export const TopLeftPosition: Story = {
+export const WithTranslations: Story = {
   args: {
     isOpen: true,
-    position: "top-left",
+    position: "top-right",
     onClose: () => console.log("Panel closed"),
+    translations: {
+      panelTitle: "Accessibility Settings",
+      panelDescription: "Adjust page display for better accessibility",
+      closePanelLabel: "Close accessibility panel",
+      colorSchemeTitle: "Color Scheme",
+      colorSchemeStandardLabel: "Standard",
+      colorSchemeStandardDescription: "Normal color scheme",
+      colorSchemeHighContrastLabel: "High Contrast",
+      colorSchemeHighContrastDescription: "High contrast for better readability",
+      colorSchemeGrayscaleLabel: "Grayscale",
+      colorSchemeGrayscaleDescription: "Convert all colors to grayscale",
+      fontSizeTitle: "Font Size",
+      fontSizeSmallLabel: "Small",
+      fontSizeSmallDescription: "Reduced text size (80%)",
+      fontSizeStandardLabel: "Standard",
+      fontSizeStandardDescription: "Normal text size",
+      fontSizeLargeLabel: "Large",
+      fontSizeLargeDescription: "Increased text size (130%)",
+      imageControlTitle: "Images",
+      imageControlShowLabel: "Show Images",
+      imageControlHideLabel: "Hide Images",
+      accessibilityToggleLabel: "Accessibility mode",
+      accessibilityEnableDescription: "All accessibility settings are active. Use controls below for fine-tuning.",
+      accessibilityDisableDescription: "Enable accessibility mode to activate all settings. When disabled, all changes will be reset."
+    }
   },
   decorators: [WithProviderAndControls],
 };
 
-export const BottomRightPosition: Story = {
-  args: {
-    isOpen: true,
-    position: "bottom-right",
-    onClose: () => console.log("Panel closed"),
-  },
-  decorators: [WithProviderAndControls],
-};

package/src/components/AccessibilityPanel/AccessibilityPanel.tsx

@@ -8,9 +8,11 @@
  * - 1.3: Скрытие панели без изменения текущих настроек
  */
 
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { AccessibilityPanelProps } from '../../types';
 import { AccessibilityProvider, useAccessibilityContext } from '../../context/AccessibilityContext';
+import { defaultTranslations } from '../../config/translations';
 import { AccessibilityToggle } from '../AccessibilityToggle/AccessibilityToggle';
 import { ColorSchemeControl } from '../ColorSchemeControl/ColorSchemeControl';
 import { FontSizeControl } from '../FontSizeControl/FontSizeControl';
@@ -28,9 +30,33 @@ const styles = typeof stylesImport === 'object' && stylesImport.default ? styles
 const AccessibilityPanelInner: React.FC<AccessibilityPanelProps> = ({
   isOpen,
   onClose,
-  position = 'top-right'
+  position = 'top-right',
+  translations = {}
 }) => {
   const panelRef = useRef<HTMLDivElement>(null);
+  
+  const mergedTranslations = { ...defaultTranslations, ...translations };
+
+  // Создаем отдельный контейнер для панели вне document.body, чтобы избежать влияния фильтров
+  const [portalContainer, setPortalContainer] = React.useState<HTMLDivElement | null>(null);
+
+  useLayoutEffect(() => {
+    // Создаем контейнер для портала вне document.body
+    const container = document.createElement('div');
+    container.setAttribute('data-accessibility-panel-container', 'true');
+    
+    // Добавляем контейнер в documentElement (HTML), а не в body
+    document.documentElement.appendChild(container);
+    
+    setPortalContainer(container);
+
+    // Очищаем при размонтировании
+    return () => {
+      if (container.parentNode) {
+        container.parentNode.removeChild(container);
+      }
+    };
+  }, []);
 
   /**
    * Обработка клика вне области панели для закрытия
@@ -88,59 +114,61 @@ const AccessibilityPanelInner: React.FC<AccessibilityPanelProps> = ({
   };
 
   // Если панель закрыта, не рендерим её
-  if (!isOpen) {
+  if (!isOpen || !portalContainer) {
     return null;
   }
 
   const { settings } = useAccessibilityContext();
 
-  return (
-      <div className={cn(styles.stickyContainer)}>
-        <div
-          ref={panelRef}
-          className={cn(
-            styles.panel,
-            styles[position],
-            settings.colorScheme === 'high-contrast' && styles.highContrastMode
-          )}
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="accessibility-panel-title"
-          aria-describedby="accessibility-panel-description"
+  // Рендерим панель через портал в отдельный контейнер вне document.body
+  return createPortal(
+    <div className={cn(styles.stickyContainer, styles[position])}>
+      <div
+        ref={panelRef}
+        className={cn(
+          styles.panel,
+          settings.colorScheme === 'high-contrast' && styles.highContrastMode,
+          settings.colorScheme === 'grayscale' && styles.grayscaleMode
+        )}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="accessibility-panel-title"
+        aria-describedby="accessibility-panel-description"
+      >
+      <div className={cn(styles.header)}>
+        <h3 id="accessibility-panel-title" className={cn(styles.title)}>
+          {mergedTranslations.panelTitle}
+        </h3>
+        
+        <button
+          onClick={handleCloseClick}
+          className={cn(styles.closeButton)}
+          aria-label={mergedTranslations.closePanelLabel}
+          type="button"
         >
-        <div className={cn(styles.header)}>
-          <h3 id="accessibility-panel-title" className={cn(styles.title)}>
-            Настройки доступности
-          </h3>
-          
-          <button
-            onClick={handleCloseClick}
-            className={cn(styles.closeButton)}
-            aria-label="Закрыть панель настроек доступности"
-            type="button"
-          >
-            ×
-          </button>
-        </div>
+          ×
+        </button>
+      </div>
 
-        <div
-          id="accessibility-panel-description"
-          className={cn(styles.description)}
-        >
-          Настройте отображение страницы для улучшения доступности
-        </div>
+      <div
+        id="accessibility-panel-description"
+        className={cn(styles.description)}
+      >
+        {mergedTranslations.panelDescription}
+      </div>
 
-        <div className={cn(styles.content)}>
-          <AccessibilityToggle />
-          
-          <div className={cn(styles.controls)}>
-            <ColorSchemeControl />
-            <FontSizeControl />
-            <ImageControl />
-          </div>
+      <div className={cn(styles.content)}>
+        <AccessibilityToggle translations={mergedTranslations} />
+        
+        <div className={cn(styles.controls)}>
+          <ColorSchemeControl translations={mergedTranslations} />
+          <FontSizeControl translations={mergedTranslations} />
+          <ImageControl translations={mergedTranslations} />
         </div>
       </div>
     </div>
+  </div>,
+  portalContainer // Рендерим в отдельный контейнер вне document.body, чтобы избежать влияния фильтров
   );
 };
 

package/src/components/AccessibilityToggle/AccessibilityToggle.stories.tsx

@@ -31,4 +31,15 @@ export const WithCustomClass: Story = {
   args: {
     className: 'custom-toggle-class',
   },
+};
+
+export const WithTranslations: Story = {
+  args: {
+    className: 'custom-toggle-class',
+    translations: {
+      accessibilityToggleLabel: "Accessibility mode",
+      accessibilityEnableDescription: "All accessibility settings are active. Use controls below for fine-tuning.",
+      accessibilityDisableDescription: "Enable accessibility mode to activate all settings. When disabled, all changes will be reset."
+    }
+  },
 };

package/src/components/AccessibilityToggle/AccessibilityToggle.tsx

@@ -10,6 +10,7 @@
 
 import React from 'react';
 import { useAccessibilityContext } from '../../context/AccessibilityContext';
+import { defaultTranslations } from '../../config/translations';
 import styles from './AccessibilityToggle.module.scss';
 
 /**
@@ -18,24 +19,30 @@ import styles from './AccessibilityToggle.module.scss';
 interface AccessibilityToggleProps {
   /** CSS класс для дополнительной стилизации */
   className?: string;
+  /** Объект с переводами */
+  translations?: Record<string, string>;
 }
 
 /**
  * Компонент главного переключателя режима доступности
- * 
+ *
  * @param props - Свойства компонента
  * @returns JSX элемент с переключателем общего режима доступности
  */
-export const AccessibilityToggle: React.FC<AccessibilityToggleProps> = ({ 
-  className 
+export const AccessibilityToggle: React.FC<AccessibilityToggleProps> = ({
+  className,
+  translations = {}
 }) => {
+  // Объединяем переданные переводы с переводами по умолчанию
+  const mergedTranslations = { ...defaultTranslations, ...translations };
+  
   // Используем контекст для получения состояния и методов управления
   const { settings, updateSettings } = useAccessibilityContext();
   const isEnabled = settings.isEnabled;
 
   /**
    * Обработчик изменения общего режима доступности
-   * 
+   *
    * @param event - Событие изменения чекбокса
    */
   const handleToggleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -60,21 +67,21 @@ export const AccessibilityToggle: React.FC<AccessibilityToggleProps> = ({
           
           <div className={styles.toggleContent}>
             <span className={styles.toggleTitle}>
-              Режим доступности
+              {mergedTranslations.accessibilityToggleLabel}
             </span>
             <span className={styles.toggleStatus}>
-              {isEnabled ? 'Включен' : 'Выключен'}
+              {isEnabled ? mergedTranslations.accessibilityEnableLabel : mergedTranslations.accessibilityDisableLabel}
             </span>
           </div>
         </label>
         
-        <p 
+        <p
           id="accessibility-toggle-description"
           className={styles.description}
         >
-          {isEnabled 
-            ? 'Все настройки доступности активны. Используйте элементы управления ниже для точной настройки.' 
-            : 'Включите режим доступности для активации всех настроек. При выключении все изменения будут сброшены.'
+          {isEnabled
+            ? mergedTranslations.accessibilityEnableDescription || 'Все настройки доступности активны. Используйте элементы управления ниже для точной настройки.'
+            : mergedTranslations.accessibilityDisableDescription || 'Включите режим доступности для активации всех настроек. При выключении все изменения будут сброшены.'
           }
         </p>
       </div>

package/src/components/ColorSchemeControl/ColorSchemeControl.stories.tsx

@@ -31,4 +31,19 @@ export const WithCustomClass: Story = {
   args: {
     className: 'custom-color-scheme-class',
   },
+};
+
+export const WithTranslations: Story = {
+  args: {
+    className: 'custom-color-scheme-class',
+    translations: {
+      colorSchemeTitle: "Color Scheme",
+      colorSchemeStandardLabel: "Standard",
+      colorSchemeStandardDescription: "Normal color scheme",
+      colorSchemeHighContrastLabel: "High Contrast",
+      colorSchemeHighContrastDescription: "High contrast for better readability",
+      colorSchemeGrayscaleLabel: "Grayscale",
+      colorSchemeGrayscaleDescription: "Convert all colors to grayscale",
+    }
+  },
 };