Animate instructions toggle icon

src/shared/versions.js

@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.17.12',
-  gatewayClient: '0.18.12',
+  macClient: '0.17.13',
+  gatewayClient: '0.18.13',
   gatewayBackend: '0.18.1',
 });
 

src/web/styles.css

@@ -1693,6 +1693,17 @@ p {
   filter: drop-shadow(0 0 7px color-mix(in oklch, var(--client-accent) 52%, transparent));
 }
 
+.client-instructions-toggle:hover svg,
+.client-instructions-toggle:focus-visible svg {
+  animation: client-secondary-icon-motion 620ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes client-secondary-icon-motion {
+  0%, 100% { transform: rotate(0) translateY(0); }
+  34% { transform: rotate(-8deg) translateY(-1px); }
+  68% { transform: rotate(5deg) translateY(0); }
+}
+
 .client-local-rules-toggle:disabled {
   cursor: default;
   color: var(--client-muted);

test/web/responsive-layout-contract.test.js

@@ -101,6 +101,7 @@ test('secondary menus share one right rail and both drawers open from the right'
 
   assert.match(component, /<nav className="client-secondary-menu" aria-label="Дополнительные меню">/);
   assert.match(component, /client-instructions-toggle[\s\S]*client-local-rules-toggle/);
+  assert.match(component, /client-instructions-toggle[\s\S]*client-devices-toggle[\s\S]*client-diagnostics-toggle[\s\S]*client-local-rules-toggle/);
   assert.match(component, /client-diagnostics-toggle/);
   assert.match(component, /<ConnectivityDiagnosticsPanel/);
   assert.doesNotMatch(component, /\{isGateway && <button[\s\S]{0,120}diagnosticsToggleRef/);
@@ -111,6 +112,8 @@ test('secondary menus share one right rail and both drawers open from the right'
   assert.match(disabledRulesLabel, /opacity:\s*0/);
   assert.match(disabledRulesLabel, /filter:\s*blur\(5px\)/);
   assert.match(styles, /\.client-local-rules-toggle:disabled:hover span\s*\{[\s\S]*opacity:\s*1/);
+  assert.match(styles, /\.client-instructions-toggle:hover svg,[\s\S]*\.client-instructions-toggle:focus-visible svg \{[\s\S]*client-secondary-icon-motion 620ms/);
+  assert.match(styles, /@keyframes client-secondary-icon-motion[\s\S]*rotate\(-8deg\)[\s\S]*rotate\(5deg\)/);
   assert.match(rule('.client-drawer'), /inset:\s*0 0 0 auto/);
   assert.match(rule('.client-drawer'), /transform:\s*translateX\(104%\)/);
   assert.match(rule('.client-drawer'), /z-index:\s*50/);